/* bottom-bar.css -- the one fixed container at the bottom of every page.
 *
 * Its left, right and bottom are written by shared/bottom-bar.js, measured from
 * the main column, because what sits below it varies: nothing on a desktop, a
 * tab bar on a phone, a section bar inside a deck. Nothing here may set those
 * three properties, or the measured values are silently overridden.
 *
 * MOBILE FIRST: one column. The three-column grid that keeps the save bar and
 * the Ask AI pill from ever overlapping only exists at --bp-lg, which is where
 * the pill is visible at all.
 */

.tcg-bottombar {
	position: fixed;
	z-index: var(--z-bottombar);
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	align-items: end;
	gap: 8px;
	/* The bar's own edge, plus the phone's. `bottom` itself is written by JS and
	   must stay out of this file. */
	padding: 0 12px calc(10px + env(safe-area-inset-bottom, 0px));
	pointer-events: none;
}
/* Only the slots take clicks, so the gap between them never eats one meant for
   the page underneath. */
.tcg-bottombar > * {
	pointer-events: auto;
}
.tcg-bottombar[hidden] {
	display: none;
}
.tcg-bottombar.is-raised {
	/* A page-owned, non-modal sheet asked the bar to sit on top of it. */
	z-index: calc(var(--z-bottombar) + 1);
}
.tcg-bottombar-save {
	min-width: 0;
}
.tcg-bottombar-save[hidden] {
	display: none;
}
.tcg-bottombar-end {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	gap: 8px;
}

/* --bp-lg: the pill appears, so the two get columns that cannot overlap. The
   middle column is capped in REAL pixels, so the bar is the same width under a
   finger on a phone and on a desktop rendering at 1.204. */
@media (min-width: 1024px) {
	.tcg-bottombar {
		grid-template-columns: minmax(0, 1fr) minmax(0, calc(780 * var(--rpx))) minmax(max-content, 1fr);
		padding-inline: 18px;
	}
	.tcg-bottombar-save {
		grid-column: 2;
	}
	.tcg-bottombar-end {
		grid-column: 3;
	}
}