/* mm-nested-nav
   Tile grid where each tile is a category. Tapping a tile expands a
   stacked list of subcategory rectangles inline, pushing later tile rows
   down. Only one category open at a time. Square edges, no carets.
*/

.mm-nnav {
	width: 100%;
	margin-top: 20px;
}

.mm-nnav__grid {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 2px;
	background: transparent;
	padding: 0;
	box-shadow: none;
}

/* Rubberized console button. Softer top highlight + softer bottom shadow
   give a rounded rubber feel. Sits in a dark inset panel with a small gap
   around it; subtle drop shadow lifts it off the panel. */
.mm-nnav__tile {
	--tile-rgb: 200, 140, 255;
	position: relative;
	aspect-ratio: 5 / 3.52;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	background:
		repeating-linear-gradient(90deg,
			rgba(255, 255, 255, 0.012) 0px,
			rgba(255, 255, 255, 0.012) 1px,
			rgba(0, 0, 0, 0.025) 1px,
			rgba(0, 0, 0, 0.025) 2px),
		linear-gradient(180deg,
			rgba(255, 255, 255, 0.06) 0%,
			rgba(255, 255, 255, 0.00) 12%,
			rgba(0, 0, 0, 0.00) 88%,
			rgba(0, 0, 0, 0.10) 100%),
		linear-gradient(180deg, #2e3137 0%, #21242a 100%);
	border: 0;
	border-radius: 3px;
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.55),
		inset 0 2px 0 rgba(255, 255, 255, 0.10),
		inset 0 -1px 0 rgba(0, 0, 0, 0.90),
		inset 0 -2px 0 rgba(0, 0, 0, 0.18),
		inset 1px 0 0 rgba(255, 255, 255, 0.22),
		inset 2px 0 0 rgba(255, 255, 255, 0.08),
		inset 3px 0 0 rgba(255, 255, 255, 0.03),
		inset -1px 0 0 rgba(255, 255, 255, 0.22),
		inset -2px 0 0 rgba(255, 255, 255, 0.08),
		inset -3px 0 0 rgba(255, 255, 255, 0.03),
		0 6px 12px rgba(0, 0, 0, 0.85),
		0 2px 4px rgba(0, 0, 0, 0.70);
	cursor: pointer;
	user-select: none;
	transition: background 200ms ease, box-shadow 200ms ease, opacity 200ms ease;
}

.mm-nnav__tile::before { content: none; }

.mm-nnav__label { display: none; }

/* Engraved icon. Filled with a tone darker than the button face so it
   reads as a recess. Hairline lighter outline at 0,0 simulates a chisel
   edge catching ambient light all the way around the silhouette; the 1px
   bright drop-shadow below adds the lip of the carving catching light
   from above. The two layered together make the icon look genuinely cut
   into the button surface. */
.mm-nnav__icon {
	position: relative;
	z-index: 1;
	width: 40%;
	max-width: 56px;
	height: auto;
	color: #0c0e12;
	filter:
		drop-shadow(0 0 0.5px rgba(255, 255, 255, 0.45))
		drop-shadow(0 1px 0 rgba(255, 255, 255, 0.10));
	transition: color 200ms ease;
	pointer-events: none;
}

.mm-nnav__tile:hover {
	background:
		repeating-linear-gradient(90deg,
			rgba(255, 255, 255, 0.015) 0px,
			rgba(255, 255, 255, 0.015) 1px,
			rgba(0, 0, 0, 0.025) 1px,
			rgba(0, 0, 0, 0.025) 2px),
		linear-gradient(180deg,
			rgba(255, 255, 255, 0.08) 0%,
			rgba(255, 255, 255, 0.00) 12%,
			rgba(0, 0, 0, 0.00) 88%,
			rgba(0, 0, 0, 0.12) 100%),
		linear-gradient(180deg, #383b42 0%, #2a2d34 100%);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.65),
		inset 0 2px 0 rgba(255, 255, 255, 0.12),
		inset 0 -1px 0 rgba(0, 0, 0, 0.90),
		inset 0 -2px 0 rgba(0, 0, 0, 0.20),
		inset 1px 0 0 rgba(255, 255, 255, 0.28),
		inset 2px 0 0 rgba(255, 255, 255, 0.10),
		inset 3px 0 0 rgba(255, 255, 255, 0.04),
		inset -1px 0 0 rgba(255, 255, 255, 0.28),
		inset -2px 0 0 rgba(255, 255, 255, 0.10),
		inset -3px 0 0 rgba(255, 255, 255, 0.04),
		0 8px 16px rgba(0, 0, 0, 0.90),
		0 3px 6px rgba(0, 0, 0, 0.75);
}

.mm-nnav__tile:active {
	background: linear-gradient(180deg, #16181c 0%, #0e1014 100%);
	box-shadow:
		inset 0 1px 1px rgba(255, 255, 255, 0.07),
		inset 0 -2px 3px rgba(0, 0, 0, 0.45),
		inset 0 2px 3px rgba(0, 0, 0, 0.65),
		0 0 0 rgba(0, 0, 0, 0);
}

/* Active = pushed in but still a button. Keeps the soft rubber top
   highlight + bottom shadow so the silhouette reads, surface darkens and
   gains a soft inner shadow at the top to fake the depression. */
.mm-nnav__tile.is-active {
	background: linear-gradient(180deg, #161a1f 0%, #1c1f25 100%);
	box-shadow:
		/* recess shadows: balanced top + bottom */
		inset 0 2px 4px rgba(0, 0, 0, 0.75),
		inset 0 -2px 4px rgba(0, 0, 0, 0.55),
		inset 2px 0 4px rgba(0, 0, 0, 0.55),
		inset -2px 0 4px rgba(0, 0, 0, 0.55),
		/* button rim — keep the dome silhouette, just dimmer than idle */
		inset 0 1px 0 rgba(255, 255, 255, 0.10),
		inset 0 -1px 0 rgba(0, 0, 0, 0.70),
		inset 1px 0 0 rgba(255, 255, 255, 0.12),
		inset -1px 0 0 rgba(255, 255, 255, 0.12);
}

/* Active icon: still engraved (1px white lip preserved), recess fill
   cycles through the palette at 65% opacity with a faint glow. */
.mm-nnav__tile.is-active .mm-nnav__icon {
	animation: mmNnavActiveCycle 14s linear infinite;
	opacity: 0.80;
	filter:
		drop-shadow(0 0 0.5px rgba(255, 255, 255, 0.60))
		drop-shadow(0 1px 0 rgba(255, 255, 255, 0.14))
		drop-shadow(0 0 1.5px currentColor);
}

/* Pause when host section is offscreen. */
.mm-offscreen .mm-nnav__tile.is-active .mm-nnav__icon {
	animation-play-state: paused !important;
}

@keyframes mmNnavActiveCycle {
	0%   { color: var(--mm-accent); }
	14%  { color: var(--mm-pal-violet); }
	28%  { color: var(--mm-pal-amber-1); }
	42%  { color: var(--mm-pal-mint); }
	57%  { color: var(--mm-pal-rose); }
	71%  { color: var(--mm-pal-lime); }
	85%  { color: var(--mm-pal-amber-2); }
	100% { color: var(--mm-accent); }
}

@media (prefers-reduced-motion: reduce) {
	.mm-nnav__tile.is-active .mm-nnav__icon { animation: none; color: var(--mm-accent); }
}


/* The expansion panel is ONE sunken pocket spanning all columns.
   Background matches the active tile: solid dark fill (no gradient that
   stretches across the tall panel) with the same top inset shadow that
   reads as "depressed into the surface" on the active button. */
.mm-nnav__panel {
	grid-column: 1 / -1;
	display: none;
	flex-direction: column;
	gap: 0;
	margin-top: 16px;
	background: linear-gradient(180deg, #161a1f 0%, #1c1f25 100%);
	border: 0;
	border-radius: 2px;
	box-shadow:
		inset 0 1px 2px rgba(0, 0, 0, 0.55),
		inset 0 -1px 2px rgba(0, 0, 0, 0.30),
		inset 1px 0 2px rgba(0, 0, 0, 0.30),
		inset -1px 0 2px rgba(0, 0, 0, 0.30);
}

.mm-nnav__panel.is-open {
	display: flex;
}

.mm-nnav__sub {
	width: 100%;
	background: transparent;
	border: 0;
	border-top: 1px solid #000;
	box-shadow: none;
	padding: 18px 22px 18px 37px;
	color: #fff;
}

.mm-nnav__sub:first-child {
	border-top: 0;
}

.mm-nnav__sub-title {
	font-size: 20px;
	font-weight: 700;
	letter-spacing: 0.02em;
	margin-bottom: 4px;
	color: #fff;
}

.mm-nnav__sub-desc {
	font-size: 17px;
	line-height: 1.55;
	color: rgba(255, 255, 255, 0.78);
}

/* ============================================================
   Tooltip (matches mm-control-knobs pattern)
   ============================================================ */
.mm-nnav__tooltip {
	position: fixed;
	left: 0;
	top: 0;
	pointer-events: none;
	z-index: 99999;
	width: 320px;
	max-width: 80vw;
	padding: 14px 18px;
	background: rgba(8, 10, 14, 0.95);
	border: 1px solid rgba(120, 180, 255, 0.5);
	color: #fff;
	opacity: 0;
	transition: opacity 0.15s ease;
}
.mm-nnav__tooltip.show { opacity: 1; }
.mm-nnav__tooltip .p-title {
	color: #fff;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.3;
	margin-bottom: 6px;
}
.mm-nnav__tooltip .p-desc {
	color: rgba(255, 255, 255, 0.78);
	font-size: 12.5px;
	line-height: 1.5;
}

/* ============================================================
   Breakpoints
   ============================================================ */

/* Small/medium 481-767: 5 across is too tight, drop to 3+2 grid. The 575
   breakpoint is intentionally folded into this range so the layout below
   the desktop 5-across stays consistent down to 481px. */
@media (min-width: 481px) and (max-width: 767px) {
	.mm-nnav__grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* Mobile <=480: 5 perfectly square buttons in a single row. Width per
   tile = container width / 5 minus gap; height matches via aspect-ratio. */
@media (max-width: 480px) {
	.mm-nnav__grid {
		grid-template-columns: repeat(5, 1fr);
		gap: 2px;
	}
	.mm-nnav__tile {
		aspect-ratio: 1 / 1;
	}
}