/* Remix compatibility gate (/trending/<shortcode>/check).
   Same charcoal/lime vocabulary as the rest of Studio -- tokens from style.css, no new
   palette. The status colour is the one new idea: green = we can build it, amber = you
   choose what changes, grey = we're not guessing. */

.compat-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(240px, 320px);
  gap: 24px;
  align-items: start;
}
.compat-main { min-width: 0; display: grid; gap: 20px; }
.compat-side { display: grid; gap: 20px; position: sticky; top: 24px; }
.compat-side h3 { margin: 0 0 14px; }

.compat-verdict { border-left: 3px solid var(--compat-accent, var(--muted)) !important; }
.compat-verdict h2 { margin: 12px 0 16px; }
.compat-supported { --compat-accent: var(--lime); }
.compat-adapt { --compat-accent: #ffc86b; }
.compat-unsupported { --compat-accent: #ff8a7a; }
.compat-unknown { --compat-accent: #9aa4b6; }

.compat-badge {
  display: inline-flex; align-items: center; gap: 9px; margin: 0;
  font-size: 11px; letter-spacing: 1.6px; text-transform: uppercase;
  color: var(--compat-accent);
}
.compat-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--compat-accent); box-shadow: 0 0 12px var(--compat-accent);
}

.compat-reasons, .compat-changes ul, .compat-evidence { list-style: none; padding: 0; margin: 0; }
.compat-reasons li {
  position: relative; padding-left: 20px; margin-bottom: 10px;
  font-size: 15px; line-height: 1.6; color: #d5dbe6;
}
.compat-reasons li::before {
  content: ""; position: absolute; left: 0; top: 9px;
  width: 6px; height: 6px; border-radius: 50%; background: var(--compat-accent);
}

.compat-changes {
  margin-top: 22px; padding: 18px 20px;
  background: #0e131c; border: 1px solid var(--border); border-radius: 12px;
}
.compat-changes h3 { margin: 0 0 12px; font-size: 14px; }
.compat-changes li {
  position: relative; padding-left: 22px; margin-bottom: 9px;
  font-size: 14px; line-height: 1.6; color: #c8d0dd;
}
/* An arrow, not a tick: these are swaps, not features you're getting. */
.compat-changes li::before { content: "\2192"; position: absolute; left: 0; color: var(--compat-accent); }
.compat-changes p { margin: 12px 0 0; }

.compat-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.compat-actions form { margin: 0; }
.compat-actions button[disabled] { opacity: .55; cursor: default; }
.compat-actions button[disabled]:hover { transform: none; background: #191d26; }
.compat-foot { margin: 16px 0 0; }

.compat-pairs { margin: 16px 0 0; padding: 0; list-style: none; counter-reset: pair; }
.compat-pairs li {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 12px 14px; margin-bottom: 8px;
  background: #0e141e; border: 1px solid #2e3746; border-radius: 10px;
  font-size: 14px;
}
.compat-avoid { color: #ff9a8c; text-decoration: line-through; text-decoration-color: #ff9a8c66; }
.compat-prefer { color: var(--lime); font-weight: 600; }
.compat-arrow { color: var(--muted); }

.compat-evidence li {
  display: flex; justify-content: space-between; gap: 12px;
  padding: 9px 0; border-bottom: 1px solid var(--border); font-size: 13px;
}
.compat-evidence li:last-child { border-bottom: 0; }
.compat-evidence b { font-weight: 500; color: #c3cbd8; }
.compat-evidence span { color: var(--muted); }
.compat-layout-summary { font-style: italic; margin: 14px 0; }

.compat-frames { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.compat-frames img {
  width: 100%; aspect-ratio: 9/16; object-fit: cover;
  border-radius: 8px; border: 1px solid #323b49; display: block;
}

.compat-flash {
  padding: 12px 16px; margin-bottom: 20px;
  background: #16210f; border: 1px solid #3d5032; border-radius: 10px;
  color: #cce0b8; font-size: 14px;
}

@media (max-width: 900px) {
  .compat-layout { grid-template-columns: 1fr; }
  .compat-side { position: static; }
  .compat-frames { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 700px) {
  .compat-actions { flex-direction: column; align-items: stretch; }
  .compat-actions button { width: 100%; }
  .compat-frames { grid-template-columns: 1fr 1fr; }
}

/* Build quality report -- a finished render is not a reviewed one, so the warnings the
   validator and renderer printed get surfaced next to the preview instead of discarded. */
.build-report {
  margin: 14px 0 0; padding: 12px 14px;
  background: #241f14; border: 1px solid #6b5a2e; border-radius: 10px;
  font-size: 13px;
}
.build-report > summary { cursor: pointer; color: #ffc86b; font-weight: 600; }
.build-report[open] > summary { margin-bottom: 10px; }
.build-report-lead { margin: 0 0 10px; color: #e4d7bb; line-height: 1.6; }
.build-report ul { margin: 0; padding-left: 18px; }
.build-report li { color: #cfc4ac; line-height: 1.55; margin-bottom: 6px; overflow-wrap: anywhere; }
.build-report p:last-child { margin: 10px 0 0; }
.build-report-clean { margin: 12px 0 0; }