/* Product surfaces on the light canvas: the shared "How it works"
   application panel (Compare / Trace / Decide tab panels). One window
   vocabulary: outer boundary, narrow black top rule, application
   header, 1px divisions. */

.app{
  border:1px solid var(--border-strong);
  border-top:3px solid var(--foreground);
  border-radius:6px;
  background:var(--card);
  box-shadow:0 1px 2px rgb(0 0 0 / .05), 0 14px 34px -18px rgb(0 0 0 / .16);
  overflow:hidden;
}
.app-bar{
  display:flex;align-items:center;justify-content:space-between;
  gap:.5rem .75rem;flex-wrap:wrap;
  min-height:2.875rem;
  padding:.55rem 1.25rem;
  border-bottom:1px solid var(--border);
}
.app-title{
  font-size:.875rem;font-weight:600;letter-spacing:-.005em;
  color:var(--foreground);
}
.app-meta{font-size:.75rem;color:var(--muted-foreground)}

/* tab-panel switch: restrained fade only */
.app[role="tabpanel"]{animation:app-in .22s ease-out}
@keyframes app-in{from{opacity:0}to{opacity:1}}
@media(prefers-reduced-motion:reduce){
  .app[role="tabpanel"]{animation:none}
}
@media(min-width:768px){.app[role="tabpanel"]{min-height:28.5rem}}

/* comparison-state text tags (label + colour, never colour alone) */
.tag{
  display:inline-flex;align-items:center;gap:.35rem;
  font-size:.6875rem;font-weight:600;letter-spacing:.03em;
  text-transform:uppercase;white-space:nowrap;
}
.tag::before{
  content:"";width:.4rem;height:.4rem;border-radius:50%;
  background:currentColor;flex-shrink:0;
}
.tag-match{color:var(--status-green)}
.tag-conflict{color:var(--status-red)}
.tag-missing{color:var(--status-amber)}
.tag-neutral{color:var(--muted-foreground)}

/* ── Compare panel: project records ───────────────────────────── */
.rec-list{list-style:none;padding:0;margin:0}
.rec-row{
  display:grid;
  grid-template-columns:minmax(11rem,1.35fr) minmax(0,1fr) minmax(0,1fr) auto;
  gap:.85rem;align-items:center;
  padding:.8rem 1.25rem;
  border-bottom:1px solid var(--border);
  font-size:.875rem;
}
.rec-row:last-child{border-bottom:0}
.rec-type{
  display:flex;flex-direction:column;gap:.15rem;
  font-weight:600;color:var(--foreground);
}
.rec-file{
  font-family:var(--font-mono);font-size:.6875rem;font-weight:400;
  color:var(--muted-foreground);overflow-wrap:anywhere;
}
.rec-val{
  font-family:var(--font-mono);font-size:.8125rem;
  color:var(--foreground);
}
.rec-date{
  font-family:var(--font-mono);font-size:.75rem;
  color:var(--muted-foreground);
}
.rec-row .tag{justify-self:end}
.rec-row.is-conflict{
  background:var(--status-red-bg);
  box-shadow:inset 3px 0 0 var(--status-red);
}
.rec-row.is-conflict .rec-val{color:var(--status-red);font-weight:600}
@media(max-width:639.98px){
  .rec-row{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) auto;
    gap:.5rem .75rem;padding:.75rem 1rem}
  .rec-date{display:none}
}

/* ── Trace panel: aligned source comparison ───────────────────── */
.src-split{display:grid;grid-template-columns:1fr}
@media(min-width:700px){.src-split{grid-template-columns:1fr 1fr}}
.src-pane{padding:1.25rem}
.src-pane + .src-pane{border-top:1px solid var(--border)}
@media(min-width:700px){
  .src-pane + .src-pane{border-top:0;border-left:1px solid var(--border)}
}
.src-doc{
  display:flex;align-items:baseline;gap:.6rem;flex-wrap:wrap;
  font-size:.875rem;font-weight:600;color:var(--foreground);
  margin-bottom:.85rem;
}
.src-file,.src-page{
  font-family:var(--font-mono);font-size:.71875rem;font-weight:400;
  color:var(--muted-foreground);
}
.src-fields{margin:0;display:flex;flex-direction:column}
.src-field{
  display:grid;grid-template-columns:6.5rem minmax(0,1fr);
  gap:.75rem;padding:.5rem 0;
  border-top:1px solid var(--border);
}
.src-field dt{font-size:.8125rem;color:var(--muted-foreground)}
.src-field dd{
  margin:0;font-family:var(--font-mono);font-size:.8125rem;
  color:var(--foreground);overflow-wrap:anywhere;
}
.src-hl{
  display:inline-block;
  color:var(--status-red);font-weight:700;
  background:var(--status-red-bg);
  outline:1px solid var(--status-red-border);
  padding:.05rem .3rem;border-radius:3px;
}
.src-finding{padding:1.1rem 1.25rem 1.25rem;border-top:1px solid var(--border)}
.src-finding-h{
  font-size:.9375rem;font-weight:600;color:var(--foreground);
  margin-bottom:.2rem;
}
.src-finding-line{font-size:.875rem;color:var(--foreground);margin-bottom:.65rem}
.src-finding-src{
  font-family:var(--font-mono);font-size:.75rem;
  color:var(--muted-foreground);margin-bottom:.2rem;
}

/* ── Decide panel: review dialog ──────────────────────────────── */
.rvw{padding:1.25rem;max-width:44rem}
.rvw-opts{display:flex;flex-direction:column;gap:.5rem;margin-bottom:.85rem}
.rvw-opt{
  display:flex;align-items:flex-start;gap:.6rem;
  padding:.6rem .75rem;
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  font-size:.8125rem;color:var(--foreground);
}
.rvw-opt-dot{
  flex-shrink:0;width:.9rem;height:.9rem;margin-top:.1rem;
  border:1px solid var(--border-strong);border-radius:50%;
  background:var(--background);
}
.rvw-opt.is-selected{border-color:var(--foreground)}
.rvw-opt.is-selected .rvw-opt-dot{
  border-color:var(--foreground);
  background:radial-gradient(circle, var(--foreground) 0 35%, var(--background) 40%);
}
.rvw-opt-label{font-weight:600}
.rvw-opt-sub{display:block;font-weight:400;font-size:.75rem;color:var(--muted-foreground)}
.rvw-note-label{
  display:block;
  font-size:.6875rem;font-weight:600;letter-spacing:.02em;
  color:var(--foreground);margin-bottom:.35rem;
}
.rvw-note{
  border:1px solid var(--border-strong);
  border-radius:var(--radius-sm);
  background:var(--background);
  padding:.6rem .75rem;
  font-size:.8125rem;line-height:1.55;color:var(--foreground);
  min-height:3.5rem;margin-bottom:.85rem;
}
.rvw-actions{display:flex;gap:.5rem;align-items:center}
.rvw-btn{
  display:inline-flex;align-items:center;
  padding:.5rem 1rem;
  font-size:.8125rem;font-weight:600;
  border-radius:var(--radius-full);
}
.rvw-btn-primary{background:var(--foreground);color:var(--primary-foreground)}
.rvw-btn-ghost{color:var(--muted-foreground)}