/* Recon session preview and post-import Location reminder; UI only. */
body.recon-chart-open { overflow: hidden; }
#recon-chart-overlay {
	position: fixed;
	inset: 0;
	/* main-node's layer: under the paused-editing alert (1000) and the title bar. */
	z-index: 10;
	box-sizing: border-box;
	width: 100%;
	height: 100%;
	padding: clamp(0.5rem, 2vw, 1.25rem);
	overflow-y: auto;
	overscroll-behavior: contain;
	background: var(--color-page-bg);
	color: var(--color-text-primary);
	transition: none;
}
.recon-chart-panel {
	display: flex;
	flex-direction: column;
	gap: 0.85rem;
	box-sizing: border-box;
	width: min(100%, 88rem);
	min-height: calc(100dvh - clamp(1rem, 4vw, 2.5rem));
	margin: 0 auto;
	padding: clamp(0.9rem, 2vw, 1.5rem);
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: 0.75rem;
	box-shadow: 0 1rem 3rem var(--color-shadow);
}
.recon-chart-header {
	display: flex;
	align-items: center;
	gap: 1rem;
	padding-bottom: 0.75rem;
	border-bottom: 1px solid var(--color-divider);
}
.recon-chart-header__text { flex: 1; min-width: 0; }
.recon-chart-header__text h2 { margin: 0 0 0.2rem; color: var(--color-text-primary); font-size: clamp(1.25rem, 2.4vw, 1.65rem); }
.recon-chart-header__text p { margin: 0; color: var(--color-text-secondary); line-height: 1.4; }
.recon-chart-icon-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	flex-shrink: 0;
	min-height: 2.75rem;
	padding: 0.45rem 0.85rem;
	color: var(--color-text-primary);
	background: var(--color-surface-muted);
	border: 1px solid var(--color-border);
	border-radius: 0.45rem;
	cursor: pointer;
}
.recon-chart-close { width: 3rem; padding: 0; font-size: 2rem; line-height: 1; }
.recon-chart-icon-button:hover, .recon-chart-icon-button:focus-visible { border-color: var(--color-accent); outline-color: var(--color-link); }
.recon-chart-toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem 0.9rem; }
.recon-chart-toolbar label { color: var(--color-text-primary); font-weight: 700; }
#recon-chart-view, #recon-chart-range {
	width: auto;
	max-width: 100%;
	min-height: 2.6rem;
	padding: 0.35rem 0.6rem;
	background: var(--color-control-bg);
	color: var(--color-control-text);
	border: 1px solid var(--color-control-border);
	border-radius: 0.4rem;
}
.recon-chart-toolbar__hint { color: var(--color-text-secondary); font-size: 0.9rem; }
.recon-chart-canvas-frame {
	position: relative;
	flex: 1 1 auto;
	min-width: 0;
	min-height: 22rem;
	height: clamp(22rem, 59dvh, 43rem);
	padding: 0.6rem;
	background: var(--color-surface);
	border: 1px solid var(--color-divider);
	border-radius: 0.55rem;
}
#recon-chart-overlay #myChart { display: block; width: 100% !important; height: 100% !important; margin: 0 !important; }
.recon-chart-footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	color: var(--color-text-secondary);
	line-height: 1.4;
}
.recon-chart-transfer {
	flex-shrink: 0;
	min-height: 2.7rem;
	padding: 0.55rem 0.95rem;
	color: var(--color-text-inverse);
	background: var(--color-accent);
	border: 1px solid var(--color-accent);
	border-radius: 0.4rem;
	cursor: pointer;
}
.recon-chart-transfer:hover { background: var(--color-accent-hover); }
.recon-location-reminder[hidden] { display: none; }
.recon-location-reminder {
	display: flex;
	align-items: center;
	gap: 0.85rem;
	margin-top: 0.9rem;
	padding: 0.85rem 1rem;
	color: var(--color-warning-text);
	background: var(--color-warning-bg);
	border: 1px solid var(--color-warning-border);
	border-left-width: 0.3rem;
	border-radius: 0.45rem;
}
.recon-location-reminder p { flex: 1; margin: 0; line-height: 1.4; }
.recon-location-reminder button {
	padding: 0.5rem 0.7rem;
	background: var(--color-surface);
	color: var(--color-text-primary);
	border: 1px solid var(--color-border);
	border-radius: 0.35rem;
	cursor: pointer;
}
/* Keep the Location reminder readable when the rest of Devices uses dark colors.
   The light-mode warning tokens deliberately have a pale background; reusing
   them with global dark-mode <strong> text produced near-white-on-cream. */
html[data-theme='dark'] .recon-location-reminder {
	background: #302719;
	color: #f7ead2;
	border-color: #d5a450;
}
html[data-theme='dark'] .recon-location-reminder strong {
	color: inherit;
	font-weight: 700;
}
html[data-theme='dark'] .recon-location-reminder button {
	background: #1d231f;
	color: #f7ead2;
	border-color: #d5a450;
}
html[data-theme='dark'] .recon-location-reminder button:hover,
html[data-theme='dark'] .recon-location-reminder button:focus-visible {
	background: #514026;
	color: #fff7e8;
	border-color: #f0c471;
}

@media (max-width: 720px) {
	.recon-chart-header { flex-wrap: wrap; }
	.recon-chart-header__text { order: -1; flex-basis: 100%; }
	.recon-chart-canvas-frame { height: 52dvh; min-height: 18rem; }
	.recon-chart-footer { align-items: stretch; flex-direction: column; }
	.recon-location-reminder { flex-wrap: wrap; }
}
/* Below 998px the fixed title bar (44px) sits over the top of the page. */
@media screen and (max-width: 998px) {
	#recon-chart-overlay { padding-top: calc(44px + 0.5rem); }
}