:root {
	/* Dark (night) is the default - matches the site's original hard-coded look. Light (day)
	   overrides these below under prefers-color-scheme: light. */
	--bg-color: black;
	--text-color: #B0B0B0;
	--row-alt-bg: #444;
	--row-hover-bg: #777;
	--panel-bg: #444;
	--border-color: #A0A0A0;
	--control-bg: #606060;
	--control-text: white;
}

@media (prefers-color-scheme: light) {
	:root {
		--bg-color: white;
		--text-color: #202020;
		--row-alt-bg: #eee;
		--row-hover-bg: #ccc;
		--panel-bg: #e4e4e4;
		--border-color: #909090;
		--control-bg: #e0e0e0;
		--control-text: #202020;
	}
}

body {
	font-family: 'Open Sans', sans-serif;
	font-size: calc(0.8em + 0.1vw);
	background-color: var(--bg-color);
	color: var(--text-color);
	/* Matches the <meta name="color-scheme"> in macros.ftl - governs browser-native form controls/
	   scrollbars actually rendered inside the page, so they follow the same day/night switch as
	   the rest of the layout instead of defaulting to whichever clashes with it. */
	color-scheme: light dark;
}

#page {
    display: grid;
}

thead, tr:nth-child(even) { background-color: var(--row-alt-bg) }
th, td { padding: 5px }
#activities-table > table > tbody > tr:hover { background-color: var(--row-hover-bg) }
table.form > tbody > thead, table.form > tbody > tr  { background-color: var(--row-alt-bg) }


a {
  color: red;
}

input[type=submit]:disabled {
  cursor: inherit;
  color: var(--text-color);
}

form#file-form {
  display: contents;
}

button, input, .file-upload {
	background-color: var(--control-bg);
	color: var(--control-text);
	font-family: inherit;
	font-size: inherit;
  cursor: pointer;
  padding:4px 10px;
  box-shadow: 0px 0px;
  border-style: none;
  margin: 2px;
}

button:active {
    transform: scale(0.98);
    box-shadow: 3px 2px 22px 1px rgba(0, 0, 0, 0.24);
}

#header {
    top: 0;
    right: 0;
    width: 100%;
    height: 35px;
    border-bottom: 3px solid var(--border-color);
}

#footer {
    font-size: 80%;
    height: 60px;
    right: 0;
    width: 100%;
    border-top: 3px solid var(--border-color);
    background-color: var(--bg-color);
}

.map {
    height: 600px;
}

/* The course preview sits among the settings forms on /user, so it's shorter than the map that
   is the whole point of the activity page. */
.course-map {
    height: 520px;
}

#course-map-table {
    width: 100%;
}

#map-table {
    width: 100%;
}

#map-type {
    font-family: 'Open Sans', sans-serif;
	font-size: 12pt;
    color: var(--text-color);
    background-color: var(--panel-bg);
}

.km-marker {
    font-weight: bold;
    padding: 2px;
    background-color: white;
    opacity: 0.4;
    border: 1px solid #BBBBBB;
}

#elevationChart {
    width: 100%;
    height: 200px;
}

/* The uncertainty on a duration estimate, shown next to it. Muted so the number stays the thing
   you read first, but present, because a bare figure implies a precision this model doesn't have. */
.estimate-range {
  opacity: 0.7;
  font-size: 0.9em;
}
.surface-speed-page { max-width: 900px; margin: 0 auto; padding: 0 12px; }
.surface-speed-scroll { overflow-x: auto; }
.surface-speed-matrix { border-collapse: collapse; width: 100%; }
.surface-speed-matrix th, .surface-speed-matrix td {
  border: 1px solid #888; padding: 8px 10px; text-align: right; vertical-align: top;
}
.surface-speed-matrix thead th { text-align: center; }
.surface-speed-matrix tbody th { white-space: nowrap; }
.surface-speed-matrix td strong, .surface-speed-matrix td span { display: block; white-space: nowrap; }
.surface-speed-matrix td span { font-size: 0.85em; opacity: 0.8; }
.surface-speed-matrix .surface-speed-empty { text-align: center; }