/* save-bar.css -- the bar itself. Its container's edges are written by
 * shared/bottom-bar.js; nothing here sets position, left, right or bottom.
 *
 * MOBILE FIRST. The count and the keys stack below --bp-sm, so a three-word
 * count and two 44px keys never fight for one line on a 390px screen.
 */

.tcg-savebar {
	background: linear-gradient(180deg, var(--float), var(--raised));
	border: 1px solid var(--line-2);
	border-radius: var(--r-panel);
	box-shadow: var(--depth-float);
	padding: 10px 12px;
	color: var(--text);
	display: flex;
	flex-direction: column;
	gap: 8px;
	/* Rises into place; stopped for anyone who asked for less motion. */
	animation: tcg-savebar-rise var(--transition-slide);
}
.tcg-savebar[hidden] {
	display: none;
}
@keyframes tcg-savebar-rise {
	from {
		transform: translateY(12px);
		opacity: 0;
	}
}

.tcg-savebar-row {
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.tcg-savebar-what {
	min-width: 0;
}
.tcg-savebar-count {
	margin: 0;
	font-weight: 600;
	font-size: var(--text-body);
}
.tcg-savebar-summary {
	margin: 2px 0 0;
	color: var(--text-2);
	font-size: var(--text-small);
	/* One line: the bar is a summary, and a long list of field names would push
	   the keys off a phone. */
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.tcg-savebar-cost {
	margin: 4px 0 0;
	color: var(--warning-text);
	font-size: var(--text-small);
}
.tcg-savebar-error {
	margin: 4px 0 0;
	color: var(--danger-text);
	font-size: var(--text-small);
}
.tcg-savebar-keys {
	display: flex;
	gap: 8px;
}
/* Full-width targets while stacked, so neither key is a narrow strip. */
.tcg-savebar-keys > .tcg-btn {
	flex: 1 1 auto;
}
.tcg-savebar-notice {
	display: flex;
	align-items: center;
	gap: 10px;
	background: var(--info-soft);
	border: 1px solid var(--info-border);
	border-radius: var(--r-tile);
	padding: 8px 10px;
	color: var(--text-2);
	font-size: var(--text-small);
}
.tcg-savebar-notice > span {
	flex: 1;
	min-width: 0;
}
/* The live region carries text for a screen reader only; showing it would
   duplicate the count that is already on screen. */
.tcg-savebar-live {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* --bp-sm */
@media (min-width: 480px) {
	.tcg-savebar-row {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}
	.tcg-savebar-keys > .tcg-btn {
		flex: 0 0 auto;
	}
}

@media (prefers-reduced-motion: reduce) {
	.tcg-savebar {
		animation: none;
	}
}