/*
================================================
Journeys of the day, and the live charging cards
================================================

The journey part styles bmwDetails.xhtml: one map with every drive of the day on it, each
drive in its own colour (BmwDetailsPage.JOURNEY_COLORS), a clickable legend under the map
and the same colour again as a dot in the list next to it. Colour is the only thing that
ties the three together, so the swatch is defined once and used by the page, by the legend
that scripts_mine/directions.xhtml builds, and by the info window on a marker.

The live charging part styles base.xhtml: the per car cards used to stretch over two thirds
of the page for one charging car, which blew the vehicle photo up to a poster. They are now
a fixed, narrow column - about a fifth wider than the picture inside it.

Kept out of style.css (the template's own stylesheet, identical in both modules) so this
stays reviewable and easy to drop. Loaded for every page from common/commonHead.xhtml.
*/

/* ---------------- journeys ---------------- */

.journey-map {
	width: 100%;
	height: 480px;
	border-radius: 6px;
}

.journey-legend {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-top: 10px;
}

/* one entry per journey - a button, so it is reachable with the keyboard too */
.journey-legend-item {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 3px 10px 3px 6px;
	border: 1px solid #e2e6ee;
	border-radius: 14px;
	background-color: #fff;
	color: #4a5568;
	font-size: 12px;
	line-height: 1.6;
	cursor: pointer;
}

.journey-legend-item:hover,
.journey-legend-item:focus {
	border-color: #b9c2d4;
	background-color: #f7f9fc;
}

/* the colour of a journey, in the legend and in the first column of the list */
.journey-swatch {
	display: inline-block;
	width: 10px;
	height: 10px;
	margin-right: 6px;
	border-radius: 50%;
	vertical-align: middle;
}

.journey-table td,
.journey-table th {
	font-size: 12px;
	/* the km, kWh and SoC columns are read down, so their digits have to line up */
	font-variant-numeric: tabular-nums;
}

/* a drive that gave energy back rather than using it */
.journey-recuperation {
	color: #12805c;
	font-weight: 600;
}

.journey-info {
	font-size: 12px;
	line-height: 1.7;
	max-width: 260px;
}

/* ---------------- live charging cards ---------------- */

/*
 * The width of one card. The column carries 15px of bootstrap gutter on each side and the
 * card body 20px, so a 340px column shows the vehicle photo about 270px wide - the card
 * around it is the ~20% bigger box that was asked for, instead of the full page width.
 */
.live-charging-col {
	flex: 0 0 auto;
	width: 340px;
	max-width: 100%;
	padding-right: 15px;
	padding-left: 15px;
}

.live-charging-col .card-subtitle {
	font-size: 12px;
}

/* the numbers still have to fit next to their label in a third of the former width */
.live-charging-col h3 {
	font-size: 20px;
	margin-bottom: 0;
}