.comparison [hidden] { display: none !important; }
.comparison p { margin: 0; }
.comparison header { display: grid; gap: .4rem; }
.comparison summary { color: var(--link); cursor: pointer; }
.comparison details p, .comparison .detail p { margin: .7rem 0; }
.comparison .controls { display: flex; flex-wrap: wrap; gap: .75rem; }
.comparison label { display: grid; gap: .25rem; color: var(--muted); font-size: .82rem; flex: 1 1 145px; }
.comparison input, .comparison select {
  width: 100%; min-height: 42px; padding: .4rem .6rem; border: 1px solid var(--line);
  border-radius: .45rem; background: var(--bg); color: var(--ink); font: inherit;
}
.comparison .item th { padding: 0; }
.comparison .item button {
  display: grid; width: 100%; text-align: left; padding: .5rem; border-radius: .4rem; border-color: transparent; color: var(--link);
}
.comparison .item button:hover, .comparison .item button:focus-visible { border-color: var(--link); }
.comparison .item button span::after { content: ' ＋'; font-weight: normal; }
.comparison .item button[aria-expanded=true] span::after { content: ' −'; }
.comparison .item button small { margin-top: .2rem; font-weight: 400; color: var(--muted); }
.comparison .detail > td { padding: .5rem 1rem; background: var(--bg); font-size: .88rem; }
.comparison .profile { table-layout: fixed; }
.comparison .profile th, .comparison .profile td { vertical-align: top; overflow-wrap: anywhere; }
.comparison .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
@media (max-width: 620px) {
  .comparison .directory, .comparison .entry, .comparison .detail, .comparison .detail > td { display: block; }
  .comparison .directory > thead { position: absolute; clip-path: inset(50%); width: 1px; height: 1px; overflow: hidden; }
  .comparison .item { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: center; border-bottom: 1px solid var(--line); padding: .4rem 0; gap: .3rem; }
  .comparison .item > th { grid-column: 1 / 3; }
  .comparison .item > td, .comparison .item > th { border: 0; }
  .comparison .item td[data-label] { padding: 0 .3rem; }
  .comparison .item td[data-label]::before { display: block; content: attr(data-label); color: var(--muted); font-size: .68rem; }
  .comparison .match { text-align: right; }
  .comparison .detail > td { padding: .4rem; }
}