/* KDay-specific styles: stop rows, the live-trip map + nav panels, the arrival
   shopping panel, the stop form, and the place-search dropdown. Reuses KNote's
   tokens (general.css / variables.css) and shared classes (app.css). Grid-first. */

/* ─── Trip CTA bar on the Today page ───────────────────────────────────────── */
.trip-bar {
	display: grid;
	grid-auto-flow: column;
	justify-content: start;
	align-items: center;
	gap: var(--spacing-sm);
	margin: var(--spacing-sm) 0 var(--spacing-md);
	padding: 14px var(--spacing-md);
	border-radius: var(--radius-card);
	background: var(--color-primary-grad);
	color: #fff;
	font: var(--font-body-large-semibold);
	text-decoration: none;
	box-shadow: var(--shadow-button);

	&.active {
		background: var(--surface-2);
		color: var(--color-primary);
		border: 1px solid var(--color-primary);
		box-shadow: none;
	}

	& .ms { font-size: 22px; }
}

/* ─── Stop rows (itinerary) ────────────────────────────────────────────────── */
.stop-row {
	display: grid;
	grid-template-columns: auto auto 1fr auto;
	align-items: center;
	gap: var(--spacing-sm);
	padding: 10px 12px;
	border-radius: var(--radius-medium);
	background: var(--surface);
	border: 1px solid var(--border);

	& + .stop-row { margin-top: var(--spacing-xs); }

	&.done { opacity: 0.55; }
	&.dragging { opacity: 0.4; }
	&.arrived { border-color: var(--color-primary); }

	& .drag-handle {
		color: var(--text-faint);
		cursor: grab;
		touch-action: none;
		display: grid;
		place-items: center;
	}

	& .stop-check {
		inline-size: 30px;
		block-size: 30px;
		border-radius: 50%;
		display: grid;
		place-items: center;
		border: none;
		background: var(--surface-3);
		color: var(--color-primary);
		cursor: pointer;

		& .stop-index { font: var(--font-body-medium-bold); color: var(--text-dim); }
		& .ms { font-size: 22px; }
	}

	&.done .stop-check { background: transparent; }

	& .stop-main {
		min-inline-size: 0;
		display: grid;
		gap: 2px;
		text-decoration: none;
		color: inherit;
	}

	& .stop-name { font: var(--font-body-large-semibold); }
	&.done .stop-name { text-decoration: line-through; }

	& .stop-meta {
		display: flex;
		flex-wrap: wrap;
		gap: 4px var(--spacing-sm);
		align-items: center;
		font: var(--font-body-small-medium);
		color: var(--text-dim);

		& > span { display: inline-grid; grid-auto-flow: column; align-items: center; gap: 2px; min-inline-size: 0; }
		& .ms { font-size: 16px; }
		& .stop-time { color: var(--color-primary); }
		& .stop-addr { max-inline-size: 14ch; }
	}

	& .stop-tag {
		padding: 1px 8px;
		border-radius: var(--radius-button);
		background: var(--surface-3);
		color: var(--text-dim);
		&.arrived { background: var(--color-primary); color: #fff; }
	}
}

/* ─── Stop editor form ─────────────────────────────────────────────────────── */
.stop-form {
	display: grid;
	gap: var(--spacing-xs);
	padding-block-end: var(--spacing-2xl);

	& .field-label {
		margin-top: var(--spacing-sm);
		font: var(--font-body-small-bold);
		color: var(--text-dim);
		display: inline-grid;
		grid-auto-flow: column;
		justify-content: start;
		align-items: center;
		gap: 4px;
		& .ms { font-size: 18px; }
	}

	& .field-grid {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: var(--spacing-sm);
	}

	& textarea.todo-input { resize: vertical; font: var(--font-body-large-regular); }
	& select.todo-input { appearance: none; }
}

.picked-addr {
	margin: 4px 0 0;
	font: var(--font-body-medium-medium);
	color: var(--color-primary);
	display: grid;
	grid-auto-flow: column;
	justify-content: start;
	gap: 4px;
}

.editor-bar {
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: var(--spacing-sm);
	margin-bottom: var(--spacing-md);

	& .editor-title { font: var(--font-h6); }
}

/* ─── Place search dropdown ────────────────────────────────────────────────── */
.place-search {
	position: relative;
	display: grid;

	& .place-input-wrap {
		display: grid;
		grid-template-columns: auto 1fr auto;
		align-items: center;
		gap: var(--spacing-sm);

		& .place-icon { color: var(--text-faint); display: grid; place-items: center; }
		& .place-spin { color: var(--color-primary); animation: kday-spin 1s linear infinite; }
		& input { min-inline-size: 0; }
	}

	& .place-results {
		position: absolute;
		inset-block-start: calc(100% + 4px);
		inset-inline: 0;
		z-index: 20;
		margin: 0;
		padding: 4px;
		list-style: none;
		max-block-size: 300px;
		overflow-y: auto;
		background: var(--surface-2);
		border: 1px solid var(--border);
		border-radius: var(--radius-medium);
		box-shadow: var(--shadow-card);
		display: grid;
		gap: 2px;

		& li {
			display: grid;
			gap: 2px;
			padding: 8px 10px;
			border-radius: var(--radius-small);
			cursor: pointer;
			&:hover { background: var(--surface-3); }

			& .place-name {
				font: var(--font-body-large-medium);
				display: inline-grid;
				grid-auto-flow: column;
				justify-content: start;
				align-items: center;
				gap: 4px;
				& .ms { font-size: 18px; color: var(--color-primary); }
			}
			& .place-addr { font: var(--font-body-small-regular); color: var(--text-dim); }
		}
	}
}

@keyframes kday-spin { to { transform: rotate(360deg); } }

/* ─── Live trip view ───────────────────────────────────────────────────────── */
.trip-map {
	block-size: clamp(280px, 48vh, 560px);
	border-radius: var(--radius-card);
	overflow: hidden;
	border: 1px solid var(--border);
	margin-bottom: var(--spacing-md);

	& map-view, & .map-canvas { display: block; block-size: 100%; }
}

/* Leaflet renders its own light chrome; keep tiles crisp on dark. */
.leaflet-container { background: var(--surface-2); font: var(--font-body-small-regular); }

.kday-pos-dot {
	border-radius: 50%;
	background: var(--color-info);
	border: 3px solid #fff;
	box-shadow: 0 0 0 4px color-mix(in oklch, var(--color-info) 40%, transparent);
}

.nav-panel,
.arrival-panel,
.trip-hint {
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius-card);
	padding: var(--spacing-md);
	display: grid;
	gap: var(--spacing-sm);
}

.nav-panel {
	& .nav-target {
		display: grid;
		grid-template-columns: 1fr auto;
		align-items: center;
		gap: var(--spacing-sm);
	}
	& .nav-to {
		font: var(--font-body-large-bold);
		display: inline-grid;
		grid-auto-flow: column;
		justify-content: start;
		align-items: center;
		gap: 4px;
		& .ms { color: var(--color-primary); }
	}
	& .nav-eta { font: var(--font-body-medium-bold); color: var(--color-primary); white-space: nowrap; }
	& .nav-maneuver {
		font: var(--font-body-large-regular);
		display: grid;
		grid-auto-flow: column;
		justify-content: start;
		align-items: center;
		gap: var(--spacing-sm);
		padding-top: var(--spacing-sm);
		border-top: 1px solid var(--border);
		& .ms { color: var(--color-primary); font-size: 24px; }
	}
}

.arrival-panel {
	border-color: var(--color-primary);

	& .arrival-head {
		font: var(--font-h6);
		display: grid;
		grid-auto-flow: column;
		justify-content: start;
		align-items: center;
		gap: var(--spacing-sm);
		& .ms { color: var(--color-primary); }
	}
	& .buy-title {
		font: var(--font-body-large-semibold);
		display: grid;
		grid-auto-flow: column;
		justify-content: start;
		align-items: center;
		gap: 4px;
		& .ms { color: var(--color-primary); }
	}
	& .buy-list {
		list-style: none;
		margin: 0;
		padding: 0;
		display: grid;
		gap: 4px;

		& li {
			display: grid;
			grid-template-columns: auto 1fr;
			align-items: center;
			gap: var(--spacing-sm);
			padding: 8px 10px;
			border-radius: var(--radius-small);
			background: var(--surface-2);
			cursor: pointer;
			font: var(--font-body-large-medium);
			& .ms { color: var(--color-primary); font-size: 22px; }
			&.picked { opacity: 0.5; & span { text-decoration: line-through; } }
		}
	}
}

.play-btn.wide { inline-size: 100%; justify-content: center; }

.trip-hint { color: var(--text-dim); & p { margin: 0; } }

.setting-note { margin: -4px 0 var(--spacing-sm); }
.settings-item.static { cursor: default; }
.success-text { color: var(--color-success); }