/* Layout and app-specific pieces only. Palette, buttons, the file drop, step
   badges, cards and status messages come from shared/ui/. */

:root {
  --accent: var(--accent-graphs);   /* Strava orange, used sparingly */
  --accent-rgb: var(--accent-graphs-rgb);
}



.tagline { margin-top: 0.25rem; }
.tagline code, code { background: rgba(128,128,128,0.15); padding: 0.1em 0.35em; border-radius: 4px; }

.controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.5rem;
  margin: 1.25rem 0 0.5rem;
}
.metric-tabs { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.metric-tabs button {
  padding: 0.35rem 0.8rem;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text);
  border-radius: 999px;
  cursor: pointer;
  font-size: 0.9rem;
}
.metric-tabs button.active { background: var(--accent); border-color: var(--accent); color: #fff; }
.metric-tabs button:disabled { opacity: 0.35; cursor: not-allowed; }

.metric-card {
  margin-top: 1rem;
  padding: 0.5rem 0.9rem 0.9rem;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface-2);
}
.config-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1rem;
}
.config-bar input[type="text"] {
  padding: 0.35rem 0.6rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
  color: var(--text);
}
.config-bar > button {
  padding: 0.35rem 0.8rem;
  border: 1px solid var(--accent);
  background: var(--accent);
  color: #fff;
  border-radius: 6px;
  cursor: pointer;
}
.config-bar > button:disabled { opacity: 0.4; cursor: not-allowed; }
.config-chip { display: inline-flex; align-items: stretch; border: 1px solid var(--border); border-radius: 999px; overflow: hidden; }
.config-chip button { border: 0; background: var(--surface-2); color: var(--text); padding: 0.3rem 0.7rem; cursor: pointer; font-size: 0.85rem; }
.config-chip .chip-x { padding: 0.3rem 0.5rem; color: var(--text-muted); border-left: 1px solid var(--border); }
.config-chip .chip-x:hover { color: #d33; }

.picker { display: flex; align-items: center; gap: 0.75rem; margin-top: 0.6rem; flex-wrap: wrap; }
.picker-label { min-width: 4.5rem; color: var(--text-muted); font-size: 0.85rem; }
.remove-metric {
  margin-left: auto;
  padding: 0.3rem 0.7rem;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-muted);
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.85rem;
}
.remove-metric:disabled { opacity: 0.35; cursor: not-allowed; }
.remove-metric:not(:disabled):hover { color: #d33; border-color: #d33; }
.zone-input {
  width: 3.4rem;
  padding: 0.25rem 0.4rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
  color: var(--text);
}
.tab-divider { width: 1px; align-self: stretch; background: var(--border); margin: 0 0.25rem; }
.control { display: flex; align-items: center; gap: 0.5rem; color: var(--text-muted); font-size: 0.9rem; }
.link-btn {
  padding: 0.3rem 0.6rem;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-muted);
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.8rem;
  white-space: nowrap;
}
.link-btn:hover { border-color: var(--accent); color: var(--text); }

.control input[type="color"] {
  width: 28px;
  height: 22px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: none;
  cursor: pointer;
}
.control select {
  padding: 0.25rem 0.4rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
  color: var(--text);
}

.chart-row { display: flex; align-items: stretch; gap: 0.5rem; margin-top: 0.75rem; }
.chart-col { flex: 1; min-width: 0; }
.y-axis-slider { display: flex; flex-direction: column; align-items: center; gap: 0.4rem; padding-top: 0.75rem; }
.y-slider {
  -webkit-appearance: slider-vertical;
  writing-mode: vertical-lr;
  direction: rtl;
  width: 20px;
  height: 240px;
  accent-color: var(--accent);
  cursor: pointer;
}
.y-slider-label { color: var(--text-muted); font-size: 0.75rem; }

.chart-actions { margin-top: 0.5rem; }


.laptable { width: 100%; border-collapse: collapse; margin-top: 1.25rem; font-size: 0.9rem; }
.laptable th, .laptable td { padding: 0.3rem 0.5rem; text-align: right; border-bottom: 1px solid var(--border); }
.laptable th:first-child, .laptable td:first-child { text-align: left; }
.laptable tr.is-rest { color: var(--text-muted); }