/* Styles for sync-compare.js. See conventions/media-review-pages.md.
   Clips wrap into a grid that fits the window, so nothing needs sideways scrolling;
   Native pixels is the one mode that may overflow, on purpose. */
section.cmp { background: #fff; border: 1px solid #ddd; border-radius: 8px; padding: 12px 14px; margin: 18px 0; }
.cmp-bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; color: #555; font-size: 0.9em; margin-bottom: 10px; }
.cmp-bar button { font: inherit; padding: 3px 9px; border: 1px solid #bbb; border-radius: 4px; background: #fff; cursor: pointer; }
.cmp-bar .hint b { color: #1f6feb; }
.cmp-stage { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr)); gap: 10px; align-items: start; }
.cmp-clip { margin: 0; min-width: 0; }
.cmp-clip figcaption { cursor: pointer; font-weight: 600; padding: 4px 8px; border-radius: 4px 4px 0 0; background: #e8e8e8; font-size: 0.9em; display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.cmp-clip figcaption .cmp-fs { font: inherit; border: 0; background: transparent; cursor: pointer; padding: 0 4px; opacity: .75; }
.cmp-clip figcaption .cmp-fs:hover { opacity: 1; }
.cmp-clip video:fullscreen { width: 100vw; height: 100vh; object-fit: contain; background: #000; }
.cmp-clip.audible figcaption { background: #1f6feb; color: #fff; }
.cmp-clip.audible figcaption::after { content: 'Sound on'; font-weight: 600; white-space: nowrap; border: 1px solid currentColor; border-radius: 4px; padding: 1px 6px; }
.cmp-clip video { display: block; background: #000; width: 100%; height: auto; cursor: pointer; }
section.cmp.playing .cmp-clip video { cursor: pointer; }
.cmp-stage.native { display: flex; flex-wrap: nowrap; overflow-x: auto; }
.cmp-stage.native .cmp-clip { flex: 0 0 auto; }
.cmp-stage.native .cmp-clip video { width: auto; max-width: none; }
.cmp-stage.flip { display: grid; grid-template-columns: 1fr; justify-content: start; }
.cmp-stage.flip .cmp-clip { grid-area: 1 / 1; visibility: hidden; }
.cmp-stage.flip .cmp-clip.shown { visibility: visible; }
table.cmp-specs { border-collapse: collapse; width: 100%; margin-top: 10px; font-size: 0.9em; }
table.cmp-specs th, table.cmp-specs td { border: 1px solid #ddd; padding: 5px 7px; text-align: left; vertical-align: top; }
table.cmp-specs thead th { background: #f0f0f0; }
table.cmp-specs tbody th { background: #fafafa; width: 16%; }