/* Star Map component styles (ADR-019).

   Co-located with the Star Map ES modules and enqueued only on the screens that
   render a map (the Star Map tool, the System Scanner orrery, and charted-Location
   note embeds), so most pages never download it. Depends on terminal.css for the
   shared :root tokens (--amber, --border, --bg-panel, …) and the CRT layer; that
   stylesheet is the enqueue dependency, guaranteeing it cascades first. */

/* The stage should fill the viewport height rather than sit at a fixed size.
   Only the Star-map page needs this, so scope it with :has(): turn the main
   pane into a flex column, let the panel grow to fill it, and let the canvas
   grow inside the panel. The stage bottom then lands on the main pane's bottom
   padding. (At narrow widths the layout drops to normal document scroll — see
   the breakpoint below — so the canvas falls back to a plain min-height.) */
.lk-main:has(.lk-starmap) {
	display: flex;
	flex-direction: column;
}

.lk-starmap {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
}

.lk-starmap-bar {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
	margin-bottom: 12px;
	padding-bottom: 10px;
	border-bottom: 1px solid var(--border);
}

.lk-starmap-views,
.lk-starmap-speed {
	display: flex;
}

.lk-starmap-view-btn,
.lk-starmap-btn {
	background: var(--bg-panel);
	border: 1px solid var(--amber-faint);
	color: var(--amber-dim);
	font: inherit;
	font-size: 12px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	padding: 5px 12px;
	cursor: pointer;
}

.lk-starmap-views .lk-starmap-view-btn + .lk-starmap-view-btn,
.lk-starmap-speed .lk-starmap-view-btn + .lk-starmap-view-btn {
	border-left: none;
}

.lk-starmap-view-btn:hover,
.lk-starmap-btn:hover {
	border-color: var(--amber-dim);
	color: var(--amber);
}

.lk-starmap-view-btn.is-active {
	border-color: var(--amber);
	color: var(--bg);
	background: var(--amber);
}

.lk-starmap-btn.is-off {
	color: var(--muted);
	border-color: var(--border);
}

.lk-starmap-jump {
	display: flex;
	align-items: center;
	gap: 6px;
}

.lk-starmap-jump-label {
	color: var(--muted);
	text-transform: uppercase;
	font-size: 11px;
	letter-spacing: 0.08em;
}

.lk-starmap-select {
	background: var(--bg-panel);
	border: 1px solid var(--amber-faint);
	color: var(--text);
	font: inherit;
	font-size: 12px;
	padding: 4px 8px;
}

.lk-starmap-title {
	color: var(--amber);
	text-transform: uppercase;
	letter-spacing: 0.12em;
	font-size: 13px;
}

.lk-starmap-fs {
	margin-left: auto;
	font-size: 15px;
	line-height: 1;
	padding: 4px 9px;
}

.lk-starmap-canvas {
	position: relative;
	width: 100%;
	flex: 1 1 auto;
	min-height: 300px; /* never shrink below this, even in a short viewport */
	border: 1px solid var(--border);
	background: #05080d;
	overflow: hidden;
	touch-action: none;

	&:focus-visible {
		outline: var(--amber) solid 1px;
	}
;
}

.lk-starmap-gl,
.lk-starmap-hud {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	display: block;
}

.lk-starmap-hud {
	pointer-events: none;
}

/* Fullscreen is a fixed CSS overlay rather than the native Fullscreen API, so
   body-level popups (the item-picker modal at z-index 10001) can still layer
   above it. */
.lk-starmap.is-fullscreen {
	position: fixed;
	inset: 0;
	z-index: 10000;
	margin: 0;
	border: none;
	border-radius: 0;
	background: var(--bg);
	display: flex;
	flex-direction: column;
}

.lk-starmap.is-fullscreen .lk-starmap-canvas {
	flex: 1 1 auto;
	height: auto;
}

@media (max-width: 700px) {
	.lk-starmap-bar {
		gap: 8px;
	}

	.lk-starmap-canvas {
		min-height: 380px;
	}
}

/* The note embed's deep-link control is an <a> wearing the top-bar button style;
   strip the default underline so it reads as a button, not a link. */
.lk-starmap-deeplink {
	text-decoration: none;
}