/* Shooglis buttons: the hover becomes a label roll (handoff 31 Oct 2026, board "CTA hover · label roll").
   The label leaves upward and a copy rises in from below; the colours change underneath.
   Primary (A3: .qs-btn--commit, place order, card quick add): pill Bordeaux to Pale Sky, circle Pale Sky to
   Bordeaux, arrow to Seashell. It replaces the Pale Sky sweep of buttons.css. Outline buttons (.shg-btn-2,
   plain .qs-btn) fill Bordeaux. Light buttons keep their own colour change. Mouse only; touch never shows
   the hover. Reduced motion swaps the label without the slide. js/roll.js adds the label wrapper:
   <span class="shg-roll" data-l="..."><span>...</span></span>. Without JS the colours still change. */

:root {
	--shg-roll-fill: 350ms;
	--shg-roll-out: 220ms;
	--shg-roll-in: 260ms;
	--shg-roll-gap: 90ms;
	--shg-roll-ease: cubic-bezier(.16, 1, .3, 1);
}

.shg-roll { position: relative; display: grid; overflow: hidden; min-inline-size: 0; line-height: 1.25; padding-block: 1px; }
.shg-roll > span, .shg-roll::after { grid-area: 1 / 1; white-space: nowrap; transition: transform var(--shg-roll-out) var(--shg-roll-ease), opacity var(--shg-roll-out) var(--shg-roll-ease); }
.shg-roll::after { content: attr(data-l); transform: translateY(120%); opacity: 0; }

/* ---------- primary: the circle stops sweeping and changes colour instead ---------- */
:is(.qs-btn.qs-btn--commit, #main.shg-co #place_order, .shg-pc__add, .qs-tile__add .qs-add) {
	transition: background-color var(--shg-roll-fill) var(--shg-roll-ease), color var(--shg-roll-fill) var(--shg-roll-ease), opacity var(--dur-op, .2s) ease-in-out, transform .12s ease;
}
:is(.qs-btn.qs-btn--commit, #main.shg-co #place_order, .shg-pc__add, .qs-tile__add .qs-add)::before {
	transition: inline-size .5s cubic-bezier(.2, .8, .2, 1), background-color var(--shg-roll-fill) var(--shg-roll-ease);
}
:is(.qs-btn.qs-btn--commit, #main.shg-co #place_order, .shg-pc__add, .qs-tile__add .qs-add)::after {
	transition: transform .35s cubic-bezier(.2, .8, .2, 1), background-color var(--shg-roll-fill) var(--shg-roll-ease);
}

@media (hover: hover) and (pointer: fine) {
	:is(.qs-btn.qs-btn--commit, #main.shg-co #place_order, .shg-pc__add, .qs-tile__add .qs-add):not(:disabled, .disabled, .is-busy, .loading, .is-done, .added):hover {
		background: var(--ab-hover-bg, var(--pale-sky)); color: var(--rich-mahogany); /* a surface that is itself Pale Sky sets --ab-hover-bg */
	}
	:is(.qs-btn.qs-btn--commit, #main.shg-co #place_order):not(:disabled, .disabled, .is-busy, .loading, .is-done, .added):hover::before {
		inline-size: var(--ab-c); background: var(--night-bordeaux);
	}
	:is(.shg-pc__add, .qs-tile__add .qs-add):not(.loading, .added):hover::before {
		inline-size: var(--ab-c); background: var(--night-bordeaux);
	}
	:is(.qs-btn.qs-btn--commit, #main.shg-co #place_order, .shg-pc__add, .qs-tile__add .qs-add):not(:disabled, .disabled, .is-busy, .loading, .is-done, .added):hover::after {
		background-color: var(--seashell); transform: none;
	}

	/* outline buttons: fill Bordeaux */
	.qs-btn.shg-btn-2:hover { background: var(--night-bordeaux); border-color: var(--night-bordeaux); color: var(--seashell); }
	.qs-btn:not(.qs-btn--commit, .qs-btn--light, .qs-btn--ghost-light, .shg-btn-2):not(:disabled, .disabled, .is-busy):hover { background: var(--night-bordeaux); border-color: var(--night-bordeaux); color: var(--seashell); }

	/* the roll, on every wrapped button that is not busy */
	:is(.qs-btn, #main.shg-co #place_order, .shg-pc__add, .qs-tile__add .qs-add):not(:disabled, .disabled, .is-busy, .loading, .is-done, .added):hover .shg-roll > span { transform: translateY(-120%); opacity: 0; }
	:is(.qs-btn, #main.shg-co #place_order, .shg-pc__add, .qs-tile__add .qs-add):not(:disabled, .disabled, .is-busy, .loading, .is-done, .added):hover .shg-roll::after {
		transform: none; opacity: 1;
		transition: transform var(--shg-roll-in) var(--shg-roll-ease) var(--shg-roll-gap), opacity var(--shg-roll-in) var(--shg-roll-ease) var(--shg-roll-gap);
	}
}
.qs-btn.shg-btn-2 { transition: background-color var(--shg-roll-fill) var(--shg-roll-ease), border-color var(--shg-roll-fill) var(--shg-roll-ease), color var(--shg-roll-fill) var(--shg-roll-ease), transform .12s ease; }

@media (prefers-reduced-motion: reduce) {
	.shg-roll > span, .shg-roll::after,
	:is(.qs-btn.qs-btn--commit, #main.shg-co #place_order, .shg-pc__add, .qs-tile__add .qs-add),
	:is(.qs-btn.qs-btn--commit, #main.shg-co #place_order, .shg-pc__add, .qs-tile__add .qs-add)::before,
	:is(.qs-btn.qs-btn--commit, #main.shg-co #place_order, .shg-pc__add, .qs-tile__add .qs-add)::after { transition: none !important; }
	.shg-roll::after { transform: none; }
	@media (hover: hover) and (pointer: fine) {
		:is(.qs-btn, #main.shg-co #place_order, .shg-pc__add, .qs-tile__add .qs-add):hover .shg-roll > span { transform: none; }
	}
}