/* Pinyon Script carries the Eloquence wordmark — see .mpick__name--script.
   Imported here rather than per page so every surface that shows the picker
   gets it without a <head> edit each time. The strict CSP on the secure module
   already allows fonts.googleapis.com for styles and fonts.gstatic.com for the
   files, so this loads there unchanged. */
@import url('https://fonts.googleapis.com/css2?family=Pinyon+Script&display=swap');

/* PRE►LOΔD — the Practice picker.
   ==========================================================================
   Split out of module-nav.css so BOTH nav implementations can use it:
   the modules' .bnav (see module-nav.css) and app.html's own .ni bar.

   app.html must NOT link module-nav.css — that file styles .bnav and
   .bnav and .ni for the module pages, and app.html declares its own .ni rules,
   so linking both would give a page two competing definitions. app.html links
   this file alone.

   Colours come from /css/tokens.css — link that FIRST. */

/* ── Practice picker ────────────────────────────────────────────────────── */
/* A small popover that slides open from the Practice button — this is a short
   list of destinations, so it should read as the button expanding, not as a
   modal taking the screen. Position is set from JS against the button. */
.mpick-scrim {
	position: fixed;
	inset: 0;
	z-index: 59;
	background: transparent; /* catches the next tap; dimming would feel modal */
}

.mpick {
	position: fixed;
	z-index: 60;
	background: var(--depth);
	border: 1px solid var(--border);
	border-radius: 14px;
	padding: 6px;
	box-shadow: var(--shadow);
	transform-origin: bottom center;
	transform: translateY(6px) scale(0.96);
	opacity: 0;
	transition: transform 0.14s ease-out, opacity 0.14s ease-out;
}

.mpick--open {
	transform: translateY(0) scale(1);
	opacity: 1;
}

.mpick__list {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.mpick__item {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	min-height: 44px;
	padding: 8px 14px 8px 10px;
	border-radius: 10px;
	border: none;
	background: none;
	color: var(--text);
	font-family: inherit;
	font-size: 0.82rem;
	font-weight: 500;
	white-space: nowrap;
	text-align: left;
	cursor: pointer;
}

.mpick__item:hover,
.mpick__item:focus-visible {
	background: var(--surface);
}

/* Where you already are: shown so the list is a stable map, but visibly not a
   destination. */
.mpick__item--here {
	color: var(--muted);
	cursor: default;
}

/* The module's own accent, set from JS so this file never has to know the
   roster. currentColor carries it into the glyph strokes. */
.mpick__icon {
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	width: 26px;
	height: 26px;
}

/* The Prior Press mark breaks this rule: its Δ is filled. See .pmk in
   module-nav.css, which re-states fill/stroke for the mark parts so this
   blanket rule cannot erase it. */
.mpick__icon svg {
	width: 20px;
	height: 20px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
	vector-effect: non-scaling-stroke;
}

.mpick__item--here .mpick__icon {
	opacity: 0.45;
}

.mpick__name {
	line-height: 1.2;
}

/* A module may render its name as a wordmark instead of UI text. Script faces
   read smaller than their point size, so this sizes up and adds a little
   tracking to stay legible in a 44px row. */
.mpick__name--script {
	font-family: 'Pinyon Script', 'Cormorant Garamond', cursive;
	font-size: 1.5em;
	line-height: 1;
	letter-spacing: 0.01em;
	/* Script ascenders/descenders sit outside the em box; this keeps the
	   baseline aligned with the plain-text labels above and below it. */
	position: relative;
	top: 0.06em;
}

@media (prefers-reduced-motion: reduce) {
	.mpick {
		transition: none !important;
		transform: none !important;
	}
}

/* ── Module preview ─────────────────────────────────────────────────────────
   Shown on hover, long-press or focus of a picker row: what the module is. */
.mprev {
	position: fixed;
	z-index: 61;                       /* above the picker itself */
	width: min(15rem, calc(100vw - 16px));
	background: var(--depth);
	border: 1px solid var(--border);
	border-radius: 14px;
	padding: 12px 13px;
	box-shadow: var(--shadow);
	pointer-events: none;              /* never eats a tap meant for the picker */
	opacity: 0;
	transition: opacity 0.13s ease-out;
}
.mprev--on { opacity: 1; }

.mprev__head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-bottom: 5px; }
.mprev__name { font-weight: 600; font-size: 0.84rem; color: var(--text); line-height: 1.25; }
.mprev__badge {
	font-size: 0.56rem; letter-spacing: 0.1em; text-transform: uppercase;
	color: var(--text-soft); border: 1px solid var(--border); border-radius: 100px; padding: 2px 7px;
}
/* margin: 0, not 0 0 10px — that bottom margin separated the blurb from the
   screen miniature that used to sit beneath it. The blurb is now the card's last
   child, so the margin was stacking on top of the card's own padding. */
.mprev__blurb { font-size: 0.74rem; line-height: 1.45; color: var(--text-soft); margin: 0; }

@media (prefers-reduced-motion: reduce) {
	.mprev { transition: none !important; }
}

/* A hover preview is meaningless where there is no hover, and the card would
   only cover the list it describes. Long-press and focus still work. */
@media (hover: none) and (pointer: coarse) {
	.mprev { width: min(13rem, calc(100vw - 16px)); }
}