/* DataCompare identity: slate/steel, matches the desktop app's tab accents. */
:root {
  --jw-accent: #334155; --jw-accent-hover: #1E293B; --jw-accent-soft: #EEF1F4;
  --jw-bg: #F7F7F5; --step-blue:#378ADD; --step-teal:#1D9E75; --step-amber:#BA7517; --step-pink:#D4537E; --step-purple:#7F77DD;
}
body { margin:0; background: var(--jw-bg); color: var(--jw-ink); font-family:'Inter',system-ui,sans-serif; }
h1,h2,h3,.jw-brand { font-family:'Space Grotesk', system-ui, sans-serif; }
.jw-header { display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; padding:.8rem 1.5rem; background: var(--jw-accent-hover); }
.jw-brand { color:#fff; } .jw-brand .dot { background: var(--step-blue); border-radius:2px; transform:rotate(45deg); }
.jw-nav a { color:#C9D3E8; } .jw-nav a:hover { background:rgba(255,255,255,.1); color:#fff; }
.jw-nav a[aria-current="page"] { background: var(--step-blue); color:#fff; }
.view { display:none; } .view.active { display:block; }
h2.title { margin:.2rem 0 1rem; font-size:1.5rem; color: var(--jw-accent-hover); }
.toolbar { display:flex; gap:.6rem; flex-wrap:wrap; align-items:center; margin-bottom:.8rem; }
.help { font-size:.82rem; color: var(--jw-muted); margin:.3rem 0 0; }
.jw-field label { display:block; font-weight:600; font-size:.82rem; margin-bottom:.25rem; }

/* compare-grid status rows */
#c-table tr.status-added td, #e-table tr.status-added td { background:#C6EFCE; }
#c-table tr.status-removed td { background:#FFC7CE; }
#c-table tr.status-changed td { background:#FFEB9C; }
#c-table th { position:sticky; top:0; background:#fff; z-index:1; }
#c-table .include-toggle { cursor:pointer; text-decoration:underline; font-weight:600; }
#e-table th { position:sticky; top:0; background:#fff; z-index:1; }

[hidden] { display: none !important; }
@media print { .jw-header, .jwg-fab, .jwg-panel, .no-print { display:none !important; } }