// Layout only. Core's stylesheets own every colour and type size; this file
// names tokens (var(--pp-*), var(--saddle-*)) and defines none of them.
// Font sizes are the 12 and 13 steps, nothing else.

.sa-stack {
	display: grid;
	gap: var(--pp-space-4);
	align-content: start;
	min-width: 0;

	&--tight {
		gap: 2px;
	}
}

.sa-row {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--pp-space-2);
}

.sa-muted {
	color: var(--pp-text-secondary);
	font-size: var(--pp-text-2xs);
}

.sa-nowrap {
	white-space: nowrap;
}

.sa-break {
	word-break: break-all;
}

// A name with its grey second part beside it, on one line.
.sa-two {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.sa-sec {
	margin-inline-start: 6px;
	color: var(--pp-text-secondary);
}

// ---------------------------------------------------------------- the page

.sa-page {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--pp-space-4);
	min-width: 0;
}

// The date row sits on the page, not in a block.
.sa-toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--pp-space-2) var(--pp-space-3);

	&__end {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: var(--pp-space-2);
		margin-inline-start: auto;
	}
}

// ‹ [Last 30 days ⌄] › as one joined control.
.sa-range {
	display: inline-flex;
	align-items: stretch;

	> button {
		border-radius: 0;
	}

	> button:first-child {
		border-start-start-radius: var(--pp-r);
		border-end-start-radius: var(--pp-r);
	}

	> button:last-child {
		border-start-end-radius: var(--pp-r);
		border-end-end-radius: var(--pp-r);
	}

	> button + button {
		margin-inline-start: -1px;
	}

	&__menu {
		min-width: 140px;
		justify-content: space-between;
		gap: var(--pp-space-2);
	}

	// Keeps the unchecked items' labels in line with the checked one.
	&__blank {
		display: inline-block;
		width: 16px;
	}
}

.sa-span {
	font-size: var(--pp-text-sm);
}

.sa-chips {
	display: flex;
	flex-wrap: wrap;
	gap: var(--pp-space-2);
}

// ---------------------------------------------------------------- numbers and chart

.sa-hero {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--pp-space-4);
	padding: var(--pp-space-4) var(--pp-space-5) var(--pp-space-3);
}

.sa-online {
	display: inline-flex;
	align-items: center;
	gap: var(--pp-space-2);
}

.sa-chart-wrap {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--pp-space-2);
}

.sa-chart {
	position: relative;
	height: 240px;

	&__wait {
		position: absolute;
		inset: 0;
	}
}

.sa-legend {
	display: flex;
	flex-wrap: wrap;
	gap: var(--pp-space-4);
	color: var(--pp-text-secondary);
	font-size: var(--pp-text-2xs);

	> span {
		display: inline-flex;
		align-items: center;
		gap: 6px;
	}
}

// The legend's and the tip's swatches: the line and the bars.
.sa-key {
	display: inline-block;
	width: 10px;
	height: 10px;
	border-radius: 2px;

	&--line {
		height: 3px;
		background: var(--saddle-chart-ink, #d000c4);
	}

	&--bar {
		background: var(--pp-border);
	}
}

.sa-tip {
	position: absolute;
	z-index: 1;
	transform: translate(-50%, calc(-100% - 14px));
	display: grid;
	gap: 2px;
	padding: var(--pp-space-2) var(--pp-space-3);
	border: 1px solid var(--pp-border);
	border-radius: var(--pp-r);
	background: var(--pp-surface);
	box-shadow: var(--pp-shadow-md);
	font-size: var(--pp-text-sm);
	white-space: nowrap;
	pointer-events: none;

	&__title {
		margin-block-end: 2px;
		color: var(--pp-text-secondary);
		font-size: var(--pp-text-2xs);
	}

	&__row {
		display: flex;
		align-items: center;
		gap: 6px;

		strong {
			margin-inline-start: auto;
			padding-inline-start: var(--pp-space-4);
		}
	}
}

// ---------------------------------------------------------------- the cards

// Six cards, two to a row, equal height.
.sa-cards {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--pp-space-4);
}

.sa-card {
	display: flex;
	flex-direction: column;
	min-width: 0;

	&__head {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: var(--pp-space-2);
		min-height: 52px;
		padding: 10px 12px 6px;
	}

	&__title {
		margin: 0;
		padding-inline-start: 4px;
		font-size: var(--pp-text-sm);
		font-weight: 600;
	}

	&__end {
		display: flex;
		align-items: center;
		margin-inline-start: auto;
	}

	&__body {
		flex: 1;
		min-width: 0;
		padding: 4px 12px;
	}

	&__foot {
		display: flex;
		justify-content: center;
		padding: 6px 12px 10px;
	}

	// The bar behind a row: Core's brand tint, darker where the row filters.
	.pp-barlist__fill {
		background: var(--saddle-brand-tint, #fde0fb);
	}

	.pp-barlist__row--clickable:hover .pp-barlist__fill {
		background: var(--saddle-brand-soft, #f9c2f4);
	}

	.pp-barlist__icon {
		color: var(--pp-text-secondary);
	}
}

.sa-metric {
	color: var(--pp-text-secondary);
	white-space: nowrap;

	&--static {
		padding: 4px 6px;
		font-size: var(--pp-text-sm);
	}
}

.sa-empty {
	margin: 0;
	padding: var(--pp-space-2);
}

// The Visitors card: face, name and where from, pages and when.
.sa-people {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 2px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.sa-person {
	display: flex;
	align-items: center;
	gap: var(--pp-space-2);
	width: 100%;
	min-height: 32px;
	padding: 0 8px;
	border: 0;
	border-radius: var(--pp-r-sm);
	background: transparent;
	color: var(--pp-text);
	font: inherit;
	font-size: var(--pp-text-sm);
	text-align: start;
	cursor: pointer;

	&:hover {
		background: var(--pp-surface-hover);
	}

	&:focus-visible {
		outline: 2px solid var(--pp-focus, #2271b1);
		outline-offset: -2px;
	}

	.sa-two {
		flex: 1;
	}

	&__end {
		flex: none;
		white-space: nowrap;
		font-variant-numeric: tabular-nums;

		.sa-sec {
			margin-inline: 0 10px;
		}
	}
}

.sa-live-text {
	color: var(--pp-success);
}

// A visitor's face beside their name: in tables and the panel title.
.sa-visitor {
	display: inline-flex;
	align-items: center;
	gap: var(--pp-space-3);
	min-width: 0;
	white-space: nowrap;
}

.sa-face {
	flex: none;
	display: block;
}

// ---------------------------------------------------------------- the windows

.sa-details {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--pp-space-3);
	min-width: 0;

	&__bar {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: var(--pp-space-2) var(--pp-space-3);
	}

	&__table {
		min-width: 0;
		max-height: min(60vh, 560px);
		overflow: auto;
	}

	&__note {
		margin: 0;
	}
}

// One visit in the visitor panel: a heading, then a rail of pages.
.sa-visit {
	h3 {
		margin: 0 0 var(--pp-space-2);
		font-size: var(--pp-text-sm);
		font-weight: 600;
	}
}

.sa-rail {
	display: grid;
	margin: 0 0 0 4px;
	padding: 0;
	border-inline-start: 1px solid var(--pp-border);
	list-style: none;
	font-size: var(--pp-text-sm);

	li {
		position: relative;
		display: flex;
		gap: var(--pp-space-3);
		padding: 5px 0 5px 14px;

		&::before {
			content: "";
			position: absolute;
			inset-inline-start: -4px;
			top: 11px;
			width: 7px;
			height: 7px;
			border-radius: 50%;
			background: var(--pp-surface);
			box-shadow: inset 0 0 0 1.5px var(--pp-border-strong, #c3c4c7);
		}
	}

	&__time {
		flex: none;
		width: 40px;
		color: var(--pp-text-secondary);
		font-variant-numeric: tabular-nums;
	}

	&__page {
		flex: 1;
		min-width: 0;
		overflow-wrap: anywhere;
	}

	&__dur {
		color: var(--pp-text-secondary);
		font-variant-numeric: tabular-nums;
		white-space: nowrap;
	}
}

.sa-badge {
	display: inline-flex;
	align-items: center;
	height: 20px;
	margin-inline-end: 6px;
	padding: 0 6px;
	border-radius: var(--pp-r-sm);
	background: var(--pp-surface-alt, #f6f7f7);
	color: var(--pp-text-secondary);
	font-size: var(--pp-text-2xs);
}

// ---------------------------------------------------------------- flags

.sa-flag {
	display: flex;
	justify-content: center;
}

.sa-flag-img {
	display: block;
	height: auto;
	border-radius: 2px;
	// Keeps near-white flags (Japan, Finland) from melting into the row.
	box-shadow: inset 0 0 0 1px var(--pp-border);
}

// ---------------------------------------------------------------- phone

@media (max-width: 782px) {
	.sa-cards {
		grid-template-columns: minmax(0, 1fr);
	}

	// Six numbers as three by two.
	.sa-numbers.pp-stat-grid--fixed {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		row-gap: var(--pp-space-3);

		> * {
			padding-inline: var(--pp-space-3);
			border-inline-start: none;
		}

		> :nth-child(3n + 2),
		> :nth-child(3n) {
			border-inline-start: 1px solid var(--pp-border);
		}

		> :nth-child(3n + 1) {
			padding-inline-start: 0;
		}
	}

	.sa-chart {
		height: 200px;
	}
}