/* ============================================================
   Map Tool (/mapper) — full-bleed drafting-table app, .ei-mt-* namespace.
   Same broadcast token system as the Simulator: dark studio palette by
   default, light palette under [data-theme="light"]. Two modes: the start
   screen (pick a canvas) and a viewport-fit paint workspace (deck strip →
   tally score-bug → rail + letterboxed map, no page scroll on desktop).
   ============================================================ */

.ei-mapper-page { margin: 0; padding: 0; background: var(--ei-bg, #0a1426); }
.ei-mapper-page .wp-block-post-content,
.ei-mapper-page .entry-content { max-width: none; margin: 0; }

/* ---- palette (dark = default studio, mirrors .ei-sim-root) ---- */
.ei-mt-root {
	--accent: #ffd35b;
	--bg: #0a1426; --deck1: #0d1d39; --deck2: #0a1426;
	--panel: #122a4e; --panel2: #0f2143; --rail-bg: #0d1d39;
	--blank: #2a3550; --off: #1c2740;
	--line: rgba(255, 255, 255, 0.09); --txt: #eaf1fb; --muted: #94abce;
	--btn-bg: #16315a; --chip-bg: #0a1830; --hover: rgba(255, 255, 255, 0.06);
	--stroke: #0a1426;
	--d-txt: #8fb3ff; --r-txt: #ff9a9a;
	--title: linear-gradient(92deg, #8fb3ff, #fff 40%, #ffb3b1);
	display: block;
	min-height: calc(100vh - var(--ei-header-h, 64px));
	background: var(--bg);
	color: var(--txt);
	font-feature-settings: "tnum" 1;
	position: relative;
}
[data-theme="light"] .ei-mt-root {
	--accent: #b07b00;
	--bg: #eef2f8; --deck1: #ffffff; --deck2: #eef3f9;
	--panel: #ffffff; --panel2: #f4f7fc; --rail-bg: #f8fafd;
	--blank: #cdd8e7; --off: #e2e9f2;
	--line: rgba(20, 42, 72, 0.14); --txt: #142544; --muted: #5b7196;
	--btn-bg: #eaf0f8; --chip-bg: #ffffff; --hover: rgba(20, 42, 72, 0.05);
	--stroke: #ffffff;
	--d-txt: #1c4fb0; --r-txt: #c5332f;
	--title: linear-gradient(92deg, #1c4fb0, #142544 42%, #c5332f);
}
.ei-mt-root * { box-sizing: border-box; }

/* mode switching + closed menus — [hidden] must beat the display rules below */
.ei-mt-start[hidden], .ei-mt-work[hidden], .ei-mt-menu[hidden] { display: none; }

/* ------------------------------------------------------------- boot card */
.ei-mt-boot {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.8rem;
	min-height: 70vh;
	color: var(--muted);
}
.ei-mt-boot--err p { color: var(--txt); font-weight: 600; }

/* ------------------------------------------------------------ shared bits */
.ei-mt-btn {
	padding: 0.5rem 0.9rem;
	cursor: pointer;
	border-radius: 8px;
	border: 1px solid var(--line);
	background: var(--btn-bg);
	color: var(--txt);
	font: inherit;
	font-weight: 700;
	font-size: 0.85rem;
	white-space: nowrap;
	flex: none;
}
.ei-mt-btn:hover:not(:disabled) { border-color: var(--accent); }
.ei-mt-btn:disabled { opacity: 0.45; cursor: default; }
.ei-mt-btn--ghost { background: transparent; }
.ei-mt-btn--gold {
	background: linear-gradient(180deg, #ffe08a, #ffd35b);
	color: #0a1426;
	border: 0;
}
.ei-mt-btn--gold:hover { filter: brightness(1.05); }
.ei-mt-btn--danger { color: var(--r-txt); }
.ei-mt-select {
	font: inherit;
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--txt);
	background: var(--btn-bg);
	border: 1px solid var(--line);
	border-radius: 8px;
	padding: 0.45rem 0.55rem;
}
.ei-mt-input {
	font: inherit;
	font-size: 0.88rem;
	color: var(--txt);
	background: var(--chip-bg);
	border: 1px solid var(--line);
	border-radius: 7px;
	padding: 0.35rem 0.5rem;
}
.ei-mt-dot { width: 12px; height: 12px; border-radius: 50%; flex: none; display: inline-block; }
.ei-mt-iconbtn {
	appearance: none;
	border: none;
	background: none;
	color: var(--muted);
	font-size: 0.9rem;
	cursor: pointer;
	padding: 0.1rem 0.3rem;
	border-radius: 6px;
}
.ei-mt-iconbtn:hover { color: var(--txt); background: var(--hover); }

/* ------------------------------------------------------------ start screen */
.ei-mt-start {
	max-width: 860px;
	margin: 0 auto;
	padding: clamp(2rem, 5vw, 3.8rem) 1.25rem 4rem;
	display: flex;
	flex-direction: column;
	gap: 1.9rem;
}
.ei-mt-start__hero { text-align: left; max-width: 620px; }
.ei-mt-start__eyebrow {
	color: var(--accent);
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	font-size: 0.78rem;
	margin: 0 0 0.4rem;
}
.ei-mt-start__title {
	font-size: clamp(2.2rem, 6vw, 3.6rem);
	line-height: 1.1;
	padding-bottom: 0.06em;
	margin: 0 0 0.7rem;
	font-weight: 850;
	background: var(--title);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}
/* the signature: the tool's own paint palette as a swatch ribbon */
.ei-mt-ribbon {
	display: flex;
	width: min(21rem, 70%);
	height: 10px;
	border-radius: 999px;
	overflow: hidden;
	margin: 0 0 0.9rem;
}
.ei-mt-ribbon span { flex: 1; }
.ei-mt-start__lead {
	color: var(--muted);
	font-size: 1.02rem;
	margin: 0;
	line-height: 1.6;
}
.ei-mt-start__section h3 {
	font-size: 0.82rem;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--muted);
	margin: 0 0 0.8rem;
}
.ei-mt-start__cards {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 0.6rem;
}
.ei-mt-card {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.9rem;
	padding: 0.9rem 1rem;
	cursor: pointer;
	background: var(--panel2);
	border: 1px solid var(--line);
	border-radius: 12px;
	color: var(--txt);
	font: inherit;
	text-align: left;
	transition: border-color 0.15s, background 0.15s, transform 0.1s;
}
.ei-mt-card:hover { transform: translateY(-1px); border-color: var(--accent); }
.ei-mt-card__txt { display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; }
.ei-mt-card__txt b { font-size: 1rem; }
.ei-mt-card__txt span { color: var(--muted); font-size: 0.8rem; line-height: 1.4; }
.ei-mt-card__stat { display: flex; flex-direction: column; align-items: flex-end; flex: none; line-height: 1.1; }
.ei-mt-card__stat strong { font-size: 1.45rem; font-weight: 850; letter-spacing: -0.01em; }
.ei-mt-card__stat small { color: var(--muted); font-size: 0.66rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; }
.ei-mt-start__continue { border-top: 1px solid var(--line); padding-top: 1.6rem; }
.ei-mt-start__saves {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 0.4rem;
}
.ei-mt-save {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 0.6rem;
	padding: 0.65rem 0.85rem;
	cursor: pointer;
	background: transparent;
	border: 1px solid var(--line);
	border-radius: 9px;
	color: var(--txt);
	font: inherit;
	text-align: left;
	min-width: 0;
}
.ei-mt-save:hover { background: var(--panel2); border-color: var(--accent); }
.ei-mt-save b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ei-mt-save em { color: var(--muted); font-style: normal; font-size: 0.78rem; white-space: nowrap; }
.ei-mt-save--resume { border-color: var(--accent); }

/* ------------------------------------------------------------- workspace */
.ei-mt-work {
	display: flex;
	flex-direction: column;
	height: calc(100vh - var(--ei-header-h, 64px));
	min-height: 540px;
}

/* deck strip */
.ei-mt-deck {
	display: flex;
	align-items: center;
	gap: 0.55rem;
	flex-wrap: nowrap;
	padding: 0.6rem clamp(0.8rem, 2.5vw, 1.6rem);
	border-bottom: 1px solid var(--line);
	background: linear-gradient(180deg, var(--deck1), var(--deck2));
}
.ei-mt-typechip {
	font-size: 0.72rem;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--accent);
	background: var(--chip-bg);
	border: 1px solid var(--line);
	border-radius: 999px;
	padding: 0.3rem 0.7rem;
	white-space: nowrap;
}
.ei-mt-title {
	flex: 1 1 10rem;
	min-width: 7rem;
	font: inherit;
	font-size: 0.98rem;
	font-weight: 650;
	color: var(--txt);
	background: transparent;
	border: 1px solid transparent;
	border-radius: 8px;
	padding: 0.42rem 0.6rem;
}
.ei-mt-title::placeholder { color: var(--muted); }
.ei-mt-title:hover { border-color: var(--line); }
.ei-mt-title:focus { border-color: var(--accent); outline: none; background: var(--chip-bg); }
.ei-mt-actions { display: flex; align-items: center; gap: 0.45rem; margin-left: auto; }
.ei-mt-slot { display: flex; gap: 0.45rem; }
/* Desktop: the ⋯ toggle is hidden and the tray dissolves into the deck's flow,
   so title/year/state/actions sit inline. Both flip on phones (see @media). */
.ei-mt-more { display: none; }
.ei-mt-tray { display: contents; }

/* tally score-bug */
.ei-mt-tallybar {
	display: flex;
	align-items: center;
	gap: 0.9rem;
	padding: 0.55rem clamp(0.8rem, 2.5vw, 1.6rem) 0.75rem;
	background: var(--deck2);
	border-bottom: 1px solid var(--line);
}
.ei-mt-tallyname {
	display: flex;
	align-items: center;
	gap: 0.45rem;
	font-size: 0.88rem;
	font-weight: 700;
	min-width: 0;
	flex: none;
}
.ei-mt-tallyname strong { font-size: 1.5rem; font-weight: 800; line-height: 1; }
.ei-mt-tallyname.is-d strong { color: var(--d-txt); }
.ei-mt-tallyname.is-r strong { color: var(--r-txt); }
.ei-mt-tallylbl { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 9rem; }
.ei-mt-barwrap { flex: 1; min-width: 0; padding-top: 0.55rem; }
.ei-mt-bar {
	position: relative;
	display: flex;
	height: 22px;
	border-radius: 999px;
	overflow: visible;
	background: var(--blank);
}
.ei-mt-seg { display: block; height: 100%; }
.ei-mt-seg:first-child { border-radius: 999px 0 0 999px; }
.ei-mt-seg:last-of-type { border-radius: 0 999px 999px 0; }
.ei-mt-seg.is-blank { background: var(--blank); }
.ei-mt-seg.is-holdover { opacity: 0.55; }
.ei-mt-majtick {
	position: absolute;
	top: -5px;
	bottom: -5px;
	width: 2.5px;
	background: var(--accent);
	transform: translateX(-50%);
	pointer-events: none;
}
.ei-mt-majtick--none { background: transparent; }
.ei-mt-majchip {
	position: absolute;
	top: -1.15rem;
	left: 50%;
	transform: translateX(-50%);
	font-size: 0.66rem;
	font-weight: 800;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--accent);
	white-space: nowrap;
}

/* rail + canvas */
.ei-mt-body {
	display: flex;
	flex: 1;
	min-height: 0;
}
.ei-mt-rail {
	width: 248px;
	flex: none;
	background: var(--rail-bg);
	border-right: 1px solid var(--line);
	padding: 0.7rem;
	display: flex;
	flex-direction: column;
	gap: 0.55rem;
	overflow-y: auto;
}
.ei-mt-cand {
	border: 1px solid var(--line);
	border-radius: 10px;
	background: var(--panel2);
	padding: 0.5rem 0.55rem;
	flex: none;
}
.ei-mt-cand.is-sel { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; }
.ei-mt-cand__head { display: flex; align-items: center; gap: 0.5rem; cursor: pointer; }
.ei-mt-cand__name {
	font-size: 0.9rem;
	font-weight: 700;
	flex: 1;
	min-width: 0;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.ei-mt-chips { display: flex; gap: 0.3rem; margin-top: 0.45rem; }
.ei-mt-chip {
	appearance: none;
	border: 1px solid rgba(0, 0, 0, 0.18);
	font: inherit;
	font-size: 0.7rem;
	font-weight: 800;
	padding: 0.3rem 0;
	flex: 1;
	border-radius: 7px;
	cursor: pointer;
}
.ei-mt-chip.is-sel { outline: 2.5px solid var(--accent); outline-offset: 1px; }
.ei-mt-chip--tossup { background: #e6c34c; color: #4a3a00; }
.ei-mt-chip--eraser { background: var(--btn-bg); color: var(--txt); border-color: var(--line); }
.ei-mt-railtools { display: flex; gap: 0.4rem; flex: none; }
.ei-mt-railtools .ei-mt-chip { padding: 0.45rem 0; }
.ei-mt-add { width: 100%; }
.ei-mt-candedit {
	margin-top: 0.5rem;
	padding-top: 0.5rem;
	border-top: 1px dashed var(--line);
	display: flex;
	flex-direction: column;
	gap: 0.45rem;
}
.ei-mt-swatches { display: grid; grid-template-columns: repeat(6, 1fr); gap: 0.3rem; }
.ei-mt-swatch {
	appearance: none;
	border: 1px solid rgba(0, 0, 0, 0.2);
	border-radius: 6px;
	height: 24px;
	cursor: pointer;
}
.ei-mt-swatch:hover { outline: 2px solid var(--accent); }

/* the letterboxed map */
.ei-mt-canvas { position: relative; flex: 1; min-width: 0; min-height: 0; background: var(--bg); }
.ei-mt-mapview { position: absolute; inset: 0; padding: 0.6rem; }
.ei-mt-svg {
	display: block;
	width: 100%;
	height: 100%;
	touch-action: pan-y; /* page still scrolls on phones; tap paints */
}
.ei-mt-unit { stroke: var(--stroke); stroke-width: 0.6; cursor: pointer; }
.ei-mt-unit:hover { stroke-width: 1.4; }
.ei-mt-unit.is-off { cursor: default; }
.ei-mt-mesh { fill: none; stroke: var(--stroke); stroke-width: 0.75; pointer-events: none; }
.ei-mt-insetlbl { font-size: 13px; font-weight: 700; fill: var(--muted); }
.ei-mt-zoomctl {
	position: absolute;
	top: 0.8rem;
	right: 0.8rem;
	display: flex;
	flex-direction: column;
	gap: 0.28rem;
	z-index: 3;
}
.ei-mt-zoomctl button {
	appearance: none;
	width: 30px;
	height: 30px;
	border-radius: 8px;
	border: 1px solid var(--line);
	background: var(--panel);
	color: var(--txt);
	font-size: 1rem;
	font-weight: 700;
	line-height: 1;
	cursor: pointer;
}
.ei-mt-zoomctl button:hover { border-color: var(--accent); }

/* ----------------------------------------------------------- dropdowns */
.ei-mt-drop { position: relative; }
.ei-mt-menu {
	position: absolute;
	top: calc(100% + 6px);
	right: 0;
	min-width: 15rem;
	background: var(--panel);
	border: 1px solid var(--line);
	border-radius: 10px;
	box-shadow: 0 14px 34px rgba(4, 10, 24, 0.45);
	padding: 0.35rem;
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
	z-index: 40;
}
.ei-mt-menuitem {
	appearance: none;
	border: none;
	background: none;
	font: inherit;
	font-size: 0.88rem;
	font-weight: 600;
	color: var(--txt);
	text-align: left;
	padding: 0.5rem 0.65rem;
	border-radius: 7px;
	cursor: pointer;
}
.ei-mt-menuitem:hover:not(:disabled) { background: var(--hover); }
.ei-mt-menuitem:disabled { opacity: 0.5; cursor: default; }
.ei-mt-menuyear { padding: 0.3rem 0.65rem 0.1rem; }
.ei-mt-menuyear .ei-mt-select { width: 100%; }
.ei-mt-saverow {
	display: flex;
	align-items: center;
	gap: 0.35rem;
	padding: 0.28rem 0.4rem;
	border-radius: 7px;
}
.ei-mt-saverow:hover { background: var(--hover); }
.ei-mt-saverow--new { border-bottom: 1px solid var(--line); border-radius: 0; margin-bottom: 0.2rem; padding-bottom: 0.55rem; }
.ei-mt-saverow .ei-mt-input { flex: 1; min-width: 0; }
.ei-mt-savename {
	appearance: none;
	border: none;
	background: none;
	font: inherit;
	font-size: 0.88rem;
	font-weight: 600;
	color: var(--txt);
	text-align: left;
	flex: 1;
	min-width: 0;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	cursor: pointer;
	padding: 0.22rem 0.25rem;
}
.ei-mt-menuempty { font-size: 0.82rem; color: var(--muted); padding: 0.5rem 0.65rem; }

/* ---------------------------------------------------------------- toast */
.ei-mt-toast {
	position: fixed;
	left: 50%;
	bottom: 1.6rem;
	transform: translate(-50%, 1rem);
	background: var(--panel);
	color: var(--txt);
	border: 1px solid var(--line);
	font-size: 0.88rem;
	font-weight: 600;
	padding: 0.6rem 1.05rem;
	border-radius: 10px;
	box-shadow: 0 10px 26px rgba(4, 10, 24, 0.5);
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.18s ease, transform 0.18s ease;
	z-index: 60;
	max-width: min(92vw, 34rem);
	text-align: center;
}
.ei-mt-toast.is-show { opacity: 1; transform: translate(-50%, 0); }
@media (prefers-reduced-motion: reduce) {
	.ei-mt-toast, .ei-mt-card { transition: none; }
	.ei-mt-card:hover { transform: none; }
}

/* focus visibility (keyboard) */
.ei-mt-root :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* --------------------------------------------------------------- mobile */

/* Tablet / narrow desktop: only the action cluster needs room to wrap; the
   deck is still a single inline row. */
@media (max-width: 900px) {
	.ei-mt-actions { flex-wrap: wrap; }
}

/* Phones: a map-first workspace. The deck collapses to one compact row
   (secondary controls hide behind the ⋯ tray), the map becomes the hero, and
   the palette turns into a sticky horizontal dock. */
@media (max-width: 720px) {
	.ei-mt-start__cards, .ei-mt-start__saves { grid-template-columns: 1fr; }

	/* collapsible toolbar — row 1 is just ‹ Start · TYPE · ⋯ */
	.ei-mt-deck { flex-wrap: wrap; row-gap: 0.5rem; }
	.ei-mt-more { display: inline-block; margin-left: auto; min-width: 2.6rem; }
	.ei-mt-tray { display: none; width: 100%; }
	.ei-mt-deck.is-tools-open .ei-mt-tray {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: 0.45rem;
	}
	.ei-mt-tray .ei-mt-title { flex: 1 1 100%; }
	.ei-mt-tray .ei-mt-select { flex: 1 1 8rem; }
	.ei-mt-actions { margin-left: 0; width: 100%; flex-wrap: wrap; }

	/* map is the hero — fills most of the viewport height */
	.ei-mt-work { height: auto; min-height: calc(100vh - var(--ei-header-h, 64px)); }
	.ei-mt-body { flex-direction: column; }
	.ei-mt-canvas { order: 1; position: relative; height: 58vh; min-height: 300px; flex: none; }

	/* palette dock — a sticky horizontal scroller that never clips a chip */
	.ei-mt-rail {
		order: 2;
		width: auto;
		border-right: 0;
		border-top: 1px solid var(--line);
		flex-direction: row;
		flex-wrap: nowrap;
		align-items: flex-start;
		overflow-x: auto;
		padding: 0.6rem 0.75rem;
		gap: 0.5rem;
		scroll-padding: 0.75rem;
		position: sticky;
		bottom: 0;
		z-index: 5;
	}
	.ei-mt-rail > * { flex: none; }
	.ei-mt-cand { min-width: 10.5rem; }
	.ei-mt-add { width: auto; white-space: nowrap; }
	.ei-mt-railtools { flex-direction: column; min-width: 6rem; }

	/* tally compaction — the bar drops to its own full-width line */
	.ei-mt-tallybar { flex-wrap: wrap; gap: 0.5rem; }
	.ei-mt-barwrap { order: 3; flex-basis: 100%; }
	.ei-mt-tallyname strong { font-size: 1.15rem; }
	.ei-mt-tallylbl { max-width: 6rem; }
}

/* Small phones: tighten the chrome and give a touch more of the screen to
   the map. */
@media (max-width: 480px) {
	.ei-mt-deck { padding: 0.5rem 0.8rem; }
	.ei-mt-tallybar { padding-left: 0.8rem; padding-right: 0.8rem; }
	.ei-mt-canvas { height: 54vh; }
	.ei-mt-cand { min-width: 9.5rem; }
}