.traffic-pair,
.movement-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px 14px;
}

.traffic-pair > span,
.movement-pair > span {
  grid-column: 1 / -1;
}

.traffic-pair strong,
.movement-pair strong {
  display: block;
  font: 700 25px/1.1 Georgia, serif;
}

.traffic-gained-value { color: #456000; }
.traffic-lost-value { color: #b13c1b; }

.traffic-pair small,
.movement-pair small {
  white-space: normal;
}

.comparison-table-filters {
  display: flex;
  align-items: end;
  justify-content: flex-end;
  gap: 10px;
}

.comparison-table-filters .compact-filter {
  width: 190px;
}

.rows-per-page {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  font-size: 11px;
}

.rows-per-page select {
  padding: 6px 24px 6px 8px;
  border: 1px solid var(--line);
  background: white;
}

.nav-user {
  max-width: 130px;
  overflow: hidden;
  color: var(--muted);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

nav form { margin: 0; }
.nav-logout { margin: 0; padding: 9px 10px; font-size: 11px; }
.login-panel { max-width: 620px; margin: 80px auto 130px; padding: 42px; background: var(--paper); border: 1px solid var(--line); text-align: center; }
.login-panel h1 { margin: 10px 0; font: 700 48px/1 Georgia, serif; }
.login-panel p { color: var(--muted); }
.google-login { display: inline-flex; margin-top: 18px; padding: 14px 20px; background: var(--ink); color: white; border-radius: 3px; font-weight: 800; text-decoration: none; }
.report-actions { display: flex; align-items: end; gap: 8px; }
.report-actions form { margin: 0; }
.share-button { margin: 0 0 5px; padding: 10px 14px; background: var(--orange); }
.share-link-row { display: grid; grid-template-columns:auto minmax(0, 1fr) auto; align-items: center; gap: 9px; margin-top: 14px; padding: 10px; background: #e7f2b8; }
.share-link-row span { font-size: 11px; font-weight: 850; text-transform: uppercase; letter-spacing: .07em; }
.share-link-row input { padding: 8px; }
.share-link-row button { margin: 0; padding: 9px 12px; }
.editable-title { min-width: 0; }
.editable-title details { display: inline-block; margin: 4px 0 0; }
.editable-title summary { color: var(--orange); cursor: pointer; font-size: 11px; font-weight: 850; text-transform: uppercase; letter-spacing: .07em; }
.editable-title form { display: flex; gap: 7px; margin-top: 7px; }
.editable-title input { width: min(480px, 70vw); padding: 9px 10px; }
.editable-title button { margin: 0; padding: 10px 12px; font-size: 11px; }
.workspace-add-snapshot { display: grid; grid-template-columns: 1fr 1.2fr; gap: 28px; margin: 0 24px 28px; padding: 20px; background: var(--paper); border: 1px solid var(--line); }
.workspace-add-snapshot h2 { margin: 4px 0; font: 700 29px Georgia, serif; }
.workspace-add-snapshot p { margin: 0; color: var(--muted); }
.workspace-add-snapshot form { display: grid; grid-template-columns: .7fr 1.3fr auto; gap: 8px; align-items: end; }
.workspace-add-snapshot form .error,.workspace-add-snapshot form .success { grid-column: 1/-1; margin: 0; }
.workspace-add-snapshot button { margin: 0; padding: 13px 14px; }
.timeline-transitions { display: grid; grid-template-columns: repeat(auto-fit,minmax(220px,1fr)); gap: 10px; margin: 0 24px 28px; }
.timeline-transitions article { padding: 16px; background: var(--paper); border-top: 4px solid var(--lime); }
.timeline-transitions span,.timeline-transitions b,.timeline-transitions small { display: block; }
.timeline-transitions span { font-size: 11px; font-weight: 850; }
.timeline-transitions b { margin: 5px 0; }
.timeline-transitions small { color: var(--muted); }
.multi-table { min-width: 1000px; }
.status-pill.intermediate { background: #eeeae0; color: var(--muted); }
.workspace-timeline-picker { margin: 0 24px 28px; padding: 20px; background: var(--paper); border: 1px solid var(--line); }
.workspace-timeline-heading { display: flex; align-items: end; justify-content: space-between; gap: 20px; }
.workspace-timeline-heading h2 { margin: 4px 0; font: 700 29px Georgia, serif; }
.workspace-timeline-heading p { margin: 0; color: var(--muted); }
.timeline-date-options { display: grid; grid-template-columns: repeat(auto-fit,minmax(190px,1fr)); gap: 8px; margin-top: 16px; }
.timeline-date-options label { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 2px 10px; padding: 13px; background: var(--cream); border: 1px solid var(--line); cursor: pointer; }
.timeline-date-options label:has(input:checked) { border-color: var(--ink); background: #edf5c9; }
.timeline-date-options input { grid-row: 1/3; width: 18px; height: 18px; accent-color: var(--orange); }
.timeline-date-options b,.timeline-date-options small { display: block; }
.timeline-date-options small { color: var(--muted); font-weight: 500; }
.timeline-date-options a { grid-column: 2; color: var(--orange); font-size: 10px; }
.workspace-timeline-picker form>button { margin-top: 14px; }

@media (max-width: 760px) {
  .comparison-table-filters {
    align-items: stretch;
    flex-direction: column;
  }

  .comparison-table-filters .compact-filter {
    width: 100%;
  }
  .report-actions { align-items: stretch; flex-direction: column; }
  .share-link-row { grid-template-columns: 1fr; }
  .workspace-add-snapshot,.workspace-add-snapshot form { grid-template-columns: 1fr; }
}