* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  color: #1d1d1d;
  background: #f4f4f5;
}
.hidden { display: none !important; }

.topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  background: #111;
  color: #fff;
  padding: 16px 22px;
  border-bottom: 1px solid #2a2a2a;
}
.topbar h1 {
  margin: 0 0 14px;
  font-size: 18px;
  letter-spacing: 2px;
  font-weight: 700;
}

/* Shared control metrics so every control sits on the same baseline/height. */
.controls {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
}
.controls > *:not(.check) { height: 36px; }
.controls .file,
.controls #brand,
.controls #run {
  font-size: 13px;
  border-radius: 6px;
  padding: 0 12px;
  display: inline-flex;
  align-items: center;
}

/* File pickers — dark pills with a hairline border so they read on the bar. */
.controls .file {
  background: #2a2a2a;
  border: 1px solid #3a3a3a;
  cursor: pointer;
  white-space: nowrap;
  color: #eaeaea;
  transition: border-color .12s, background .12s;
}
.controls .file:hover { border-color: #555; background: #303030; }
.controls .file input { display: none; }


/* Brand select — styled to match instead of the browser default white box. */
.controls #brand {
  appearance: none;
  -webkit-appearance: none;
  background: #2a2a2a
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6'><path d='M0 0l5 6 5-6z' fill='%23bbb'/></svg>")
    no-repeat right 10px center;
  border: 1px solid #3a3a3a;
  color: #eaeaea;
  padding-right: 28px;
  cursor: pointer;
  outline: none;
  transition: border-color .12s;
}
.controls #brand:focus { border-color: #6b9dff; }

/* Geometry checkbox — give the label room and a hover affordance. */
.controls .check {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  color: #cfcfcf;
  white-space: nowrap;
  cursor: pointer;
}
.controls .check:hover { color: #fff; }
.controls .check input { cursor: pointer; margin: 0; accent-color: #6b9dff; }

/* Run QA — primary action, pushed to the right end of the bar. */
.controls #run {
  margin-left: auto;
  background: #fff;
  color: #111;
  border: 1px solid #fff;
  padding: 0 20px;
  font-weight: 600;
  cursor: pointer;
  transition: background .12s;
}
.controls #run:hover:not(:disabled) { background: #e8e8e8; }
.controls #run:disabled { opacity: .5; cursor: default; }
.status { margin-top: 8px; font-size: 13px; min-height: 18px; }
.status .fail { color: #ff6b6b; }
.status .review { color: #ffcc66; }
.status .pass { color: #6bd98a; }

/* Bulk-upload language picker — one tab per language, switches which
   language's report (compliance/style/footer/images) is shown below. */
.lang-menu {
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.lang-tab {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .3px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid #3a3a3a;
  background: #2a2a2a;
  color: #cfcfcf;
  cursor: pointer;
  transition: background .12s, border-color .12s, color .12s;
}
.lang-tab:hover:not(:disabled) { border-color: #666; color: #fff; }
.lang-tab.active { background: #fff; color: #111; border-color: #fff; }
.lang-tab--error {
  color: #ff6b6b;
  border-color: #6b2a2a;
  cursor: not-allowed;
  opacity: .8;
}

main { padding: 18px 20px 60px; }

.panels {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  align-items: start;
}
.panels figure { margin: 0; }

/* Render-only mode (no Figma URL): hide the empty Figma design + Annotated
   panels and show the Rendered HTML alone at desktop email width. */
.panels.render-only { grid-template-columns: 1fr; justify-items: start; }
.panels.render-only figure:nth-child(1),
.panels.render-only figure:nth-child(3) { display: none; }
.panels.render-only figure:nth-child(2) { width: 100%; max-width: 720px; }
.panels figcaption {
  font-size: 12px; text-transform: uppercase; letter-spacing: 1px;
  color: #666; margin-bottom: 6px;
}
.imgwrap {
  position: relative; background: #fff; border: 1px solid #ddd; border-radius: 4px;
  overflow: hidden;
}
.imgwrap img { display: block; width: 100%; height: auto; }

.overlay { position: absolute; inset: 0; pointer-events: none; }
.overlay .box {
  position: absolute; border: 2px solid transparent; border-radius: 2px;
}
.overlay .box.fail { border-color: #dc0000; background: rgba(220,0,0,.08); }
.overlay .box.warning { border-color: #e6b400; background: rgba(230,180,0,.08); }
.overlay .box.flash { animation: pulse 1.2s ease-out 2; }
.overlay .marker {
  position: absolute; top: -10px; left: -10px;
  min-width: 20px; height: 20px; padding: 0 4px;
  border-radius: 10px; font-size: 12px; font-weight: 700; line-height: 20px;
  text-align: center; color: #fff;
}
.overlay .marker.fail { background: #dc0000; }
.overlay .marker.warning { background: #e6b400; color: #222; }
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(220,0,0,.6); }
  100% { box-shadow: 0 0 0 14px rgba(220,0,0,0); }
}

.findings { margin-top: 24px; }
.findings h2 { font-size: 14px; text-transform: uppercase; letter-spacing: 1px; }
.group-title { margin: 16px 0 6px; font-size: 13px; font-weight: 700; }
.finding {
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr);
  gap: 12px; align-items: start;
  padding: 9px 12px; border: 1px solid #e3e3e3; border-radius: 4px;
  background: #fff; margin-bottom: 6px; cursor: pointer;
}
.finding:hover { border-color: #999; }
.finding.active { outline: 2px solid #111; }

/* Geometry findings keep the original 3-column (badge | what | vals) layout. */
.finding--geo { grid-template-columns: 84px minmax(0, 1fr) minmax(0, 1.4fr); }

.finding-body { min-width: 0; display: flex; flex-direction: column; gap: 4px; }

/* Click-to-copy affordance for compliance/style rows. */
.finding.copyable { cursor: copy; }
.finding.copyable:hover { background: #f7f7f8; }
.finding.copied { outline: 2px solid #6bd98a; }
.finding.copied::after {
  content: "Copied"; position: absolute; right: 10px; top: 6px;
  font-size: 10px; font-weight: 700; color: #1a7f3c;
  background: #d7f5e0; padding: 1px 6px; border-radius: 3px;
}
.finding.copied { position: relative; }
.badge {
  font-size: 11px; font-weight: 700; text-align: center; padding: 3px 0;
  border-radius: 3px; color: #fff;
}
.badge.fail { background: #dc0000; }
.badge.warning { background: #e6b400; color: #222; }
.badge.pass { background: #6bd98a; color: #123; }
.badge.info { background: #4a90d9; }
.finding .what { font-size: 13px; min-width: 0; overflow-wrap: anywhere; }
.finding .what .muted { color: #888; }
.finding .what .vp-mobile {
  font-size: 10px; font-weight: 700; padding: 1px 5px; border-radius: 3px;
  background: #7b3fe4; color: #fff; vertical-align: middle;
}
/* Stacked, left-aligned value lines (compliance/style rows). */
.finding .vals {
  font-size: 12px; color: #444; min-width: 0;
  display: flex; flex-direction: column; gap: 3px;
}
.finding .val-line {
  display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 8px;
  align-items: baseline;
  white-space: normal; overflow-wrap: anywhere; word-break: break-word;
}
.finding .val-label {
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em; color: #999; text-align: right;
}
.finding .val-text { min-width: 0; }
.finding .val-exp .val-text { color: #555; }       /* expected / brief side */
.finding .val-act .val-text { color: #dc0000; font-weight: 600; }  /* actual / render — the diff */
/* Match: shown once, full width, no label column; only break truly long tokens. */
.finding .val-match {
  display: block; color: #222;
  overflow-wrap: anywhere; word-break: normal;
}

/* Geometry rows still use the inline "expected → actual" .vals markup. */
.finding--geo .vals {
  display: block; text-align: right;
  white-space: normal; overflow-wrap: anywhere; word-break: break-word;
}
.finding--geo .vals b { color: #dc0000; }