/*
 * HEADER
 * ======
 * Flat brand band at the top of the page. Sticky on the result view
 * (`.header-result`) so the page metadata stays visible while
 * scrolling through the waterfalls.
 */

.header,
.header-result {
  background: var(--color-surface-card);
  border-bottom: 1px solid var(--color-border);
  padding: 18px 20px;
  position: relative;
  overflow-x: hidden;
}

.header-result {
  position: sticky;
  top: 0;
  z-index: 50;
  padding: 12px 20px;
  box-shadow: var(--shadow-sm);
}

.logo {
  position: absolute;
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
}

.img-logo {
  width: 56px;
  height: auto;
}

.title {
  text-align: center;
  font-size: 1.75rem;
  font-weight: var(--font-weight-semibold);
  letter-spacing: -0.01em;
  margin: 0;
  color: var(--color-text);
}

.subtitle {
  text-align: center;
  font-weight: var(--font-weight-regular);
  font-size: 1rem;
  color: var(--color-text-secondary);
  margin: 4px 0 0 0;
}

/*
 * Work-in-progress ribbon — retained, restyled to sit more quietly
 * on the new lighter surface.
 */
.wip {
  position: absolute;
  right: -42px;
  top: 14px;
  transform: rotate(45deg);
  background-color: var(--color-blue);
  color: var(--color-surface-card);
  width: 160px;
  text-align: center;
  font-size: 0.75rem;
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 4px 0;
}

@media (max-width: 600px) {
  .header,
  .header-result {
    padding: 14px 16px;
  }

  .img-logo { width: 32px; }
  .title    { font-size: 1.25rem; }
  .subtitle { font-size: 0.9rem; }
}