/* ─── Compare page layout ────────────────────────────────────────────────────
   Body already has: display:flex; flex-direction:column; min-height:100vh
   #topbar is rendered by compare.js using existing timeline.css classes.
   #compare-root is the single scroll container for both axes.
   ─────────────────────────────────────────────────────────────────────────── */

#compare-root {
  flex: 1;
  overflow: auto;
  min-height: 0;
  background: var(--color-bg);
}

/* ─── Grid: single column-of-rows container ──────────────────────────────── */
.c-grid {
  display: flex;
  flex-direction: column;
  /* Width is determined by content (SVGs have fixed pixel widths) */
}

/* ─── Sticky date-axis header row ────────────────────────────────────────── */
.c-header-row {
  display: flex;
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
}

/* Corner cell: sticky both top (via parent) and left */
.c-corner {
  flex-shrink: 0;
  border-right: 1px solid var(--color-border);
  background: var(--color-chrome);
  position: sticky;
  left: 0;
  z-index: 21;
  display: flex;
  align-items: flex-end;
  padding: 0 10px 7px;
}

.c-corner-inner {
  font-family: 'DM Sans', sans-serif;
  font-size: 10px;
  color: var(--color-text-faint);
  text-transform: uppercase;
  letter-spacing: .07em;
}

/* Header SVG container — no overflow, just sits beside the corner */
.c-header-svg-wrap {
  flex-shrink: 0;
  line-height: 0; /* prevent inline SVG gap */
}

/* ─── Project banner (full-width separator) ──────────────────────────────── */
.c-project-banner {
  display: flex;
  align-items: center;
  height: 34px;
  background: var(--color-chrome-dark);
  border-top: 2px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}

.c-banner-label {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 10px 0 14px;
  gap: 8px;
  position: sticky;
  left: 0;
  z-index: 10;
  background: var(--color-chrome-dark);
  border-right: 1px solid var(--color-border);
  height: 100%;
}

.c-project-name-link {
  font-family: 'DM Sans', sans-serif;
  font-size: 11px;
  font-weight: 500;
  color: var(--color-text);
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  min-width: 0;
}
.c-project-name-link:hover { text-decoration: underline; }

.c-remove-btn {
  flex-shrink: 0;
  font-size: 13px;
  line-height: 1;
  color: var(--color-text-faint);
  background: transparent;
  border: none;
  padding: 0 2px;
  opacity: 0.5;
}
.c-remove-btn:hover { opacity: 1; color: var(--color-danger); }

/* Line that fills the SVG area of the banner row */
.c-banner-line {
  flex: 1;
  height: 1px;
  background: var(--color-border);
  align-self: center;
}

/* ─── Project content row (label col + body SVG side by side) ────────────── */
.c-project-content {
  display: flex;
  align-items: stretch;
}

/* ─── Sticky label column ────────────────────────────────────────────────── */
.c-label-col {
  flex-shrink: 0;
  border-right: 1px solid var(--color-border);
  background: #EBEBEB;
  position: sticky;
  left: 0;
  z-index: 10;
}

/* ─── Body SVG container ─────────────────────────────────────────────────── */
.c-body-svg-wrap {
  flex-shrink: 0;
  line-height: 0;
}

/* ─── Empty state ────────────────────────────────────────────────────────── */
.c-empty {
  padding: 60px 40px;
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  color: var(--color-text-faint);
}

/* ─── Top bar: compare-specific additions ────────────────────────────────── */
.compare-title {
  font-family: 'Libre Baskerville', Georgia, serif;
  font-weight: 700;
  font-size: 13px;
  color: var(--color-text);
  letter-spacing: .02em;
}

.topbar-add-select {
  padding: 3px 8px 3px 10px;
  font-size: 12px;
  font-family: 'DM Sans', sans-serif;
  font-weight: 500;
  color: var(--color-text);
  background: var(--color-chrome);
  border: 1px solid var(--color-border);
  border-radius: 5px;
  cursor: pointer;
  outline: none;
  max-width: 240px;
}