/**
 * `tr-shelf` — the horizontal card row, as its own stylesheet.
 *
 * EXTRACTED FROM `archive-discovery.css` (C-66) for the same reason
 * `tool-strip.css` was extracted before it: a fourth surface needed the
 * component, and that file is 18.9 KB of archive-only rules. Shipping all of it
 * on 764 comparison singles to reach fifty lines of shelf contract is the
 * conditional-loading rule in CLAUDE.md §5 read backwards.
 *
 * The rules are MOVED, not copied. `archive-discovery.css` now loads this file
 * as a dependency and keeps only what is genuinely the archive's — the three
 * archives' `--tiorai-carousel-fade` surface and the `--lane` variant. One
 * definition, four consumers.
 *
 * THE SCROLLING IS NOT HERE. This dresses the parent theme's shared
 * `tr-carousel`, which owns the snapping, the edge fades, the arrow reveal and
 * the keyboard behaviour. What a shelf adds is the track's flex rhythm and how
 * many cards are visible at each width — nothing else.
 *
 * @package TiorAI
 */

/*
 * 3.4, NOT 4, AND THE FRACTION IS THE WHOLE POINT.
 *
 * The component's arrows are an overlay pinned to the track edges, sitting on
 * top of a 64px edge fade, so whatever card is at the edge dissolves under them.
 * That is right where the items are avatar tiles and losing 60px costs nothing.
 * Here the items are cards with a title and a three-line description, and at a
 * whole `4` the fourth card's text ran under the fade and the next arrow sat on
 * its second line: measured at 1440, "Suno vs Mubert: Which AI Musi…" with the
 * disc over the rest.
 *
 * A fractional count fixes it at the source rather than by shrinking the fade or
 * moving the button, both of which would be a page overriding a shared
 * component's own design. The fourth card is DELIBERATELY partial, which is what
 * the fade is drawn for, and the peek says the row continues without needing the
 * arrows to say it.
 */
.tr-shelf {
	--tiorai-carousel-visible: 3.4;
	--tiorai-carousel-gap: var(--space-5);
}

.tr-shelf__track {
	display: flex;
	gap: var(--tiorai-carousel-gap);
	list-style: none;
	margin: 0;
	/*
	 * No inline padding: it would shrink the box the item width's `100%`
	 * resolves against and push a sliver of the next card into view. The
	 * component's docblock states this as a contract.
	 */
	padding: 0;
}

.tr-shelf__item {
	display: flex;
	flex: 0 0 var(--tiorai-carousel-item-width);
	min-inline-size: 0;
	scroll-snap-align: start;
}

.tr-shelf__item > * {
	inline-size: 100%;
}

/*
 * The card lifts on hover. Inside a clipping scroll container that lift is the
 * one place a 2px transform can be cropped, so the viewport gets a little block
 * padding to hold it, and the negative margin keeps the row's optical position
 * where the section rhythm put it.
 */
.tr-shelf .tr-carousel__viewport {
	margin-block: calc(var(--space-2) * -1);
	padding-block: var(--space-2);
}

@media (max-width: 1024px) {
	.tr-shelf {
		/*
		 * A fractional count is a peek affordance, not a rounding error: a third
		 * of the next card stays on screen so the row visibly continues.
		 */
		--tiorai-carousel-visible: 2.35;
	}
}

@media (max-width: 640px) {
	.tr-shelf {
		--tiorai-carousel-gap: var(--space-4);
		--tiorai-carousel-visible: 1.15;
	}
}

/* --------------------------------------------------------------------------
   tr-shelf--lane — A LANE FOR THE ARROWS, OUTSIDE THE CARDS

   The opt-in a shelf takes when its cards are too content-dense to have a disc
   painted on them. The component mounts its arrows as an overlay pinned to the
   track edges, sitting on a 64px edge fade, so whatever card is at the edge
   dissolves under them. That is right on `/prompts/`, where the items are avatar
   tiles and losing 60px of the strip costs nothing. It is wrong for a card
   carrying a title, a description and a button: measured at 1440 on `/compare/`,
   the disc landed on the fourth card's second line.

   So above 1025px the shell takes inline padding, the arrows sit in THAT, and
   the fades switch off because there is no longer a partial card for them to
   dissolve. The two numbers are derived from one another rather than guessed:

     lane  = disc (40px) + air either side          -> 64px
     bleed = the container's own gutter, never more  -> the shelf can span the
             container's border box and not one pixel further, so no width can
             push a disc off-screen or give the document a horizontal scrollbar

   Below 1025px there is no lane: the shelf shows a fractional count there, the
   card at the edge is DELIBERATELY partial, the fade is drawn for exactly that,
   and a touch viewport swipes the row rather than clicking the arrows.

   THE VISIBLE COUNT IS NOT SET HERE. How many cards fit is the archive's own
   decision — a comparison card and an alternatives card are not the same
   measure — so each consumer declares its own ladder. What this modifier owns is
   only where the arrows go.

   ESTABLISHED ON `/compare/` (C-68) AND LIFTED HERE UNCHANGED, values and all,
   the first time a second shelf needed it. `.tr-cmp__shelf` in compare-archive.css
   still carries its own copy; collapsing it onto this modifier is booked as
   follow-up in tasks.md, because that file belongs to another surface's task.
   -------------------------------------------------------------------------- */

.tr-shelf--lane {
	/* A hairline of softening rather than a 64px wash, so below the lane
	   breakpoint the disc sits on the gap between cards instead of on one. */
	--tiorai-carousel-fade-width: 1.25rem;
}

/* NO DROP SHADOW. The component adds one once it is scrollable, to separate a
   floating disc from a busy card behind it. In a lane the disc sits on the page
   ground beside the track, where the shadow reads as grime rather than as
   elevation. */
.tr-shelf--lane.is-scrollable .tr-carousel__btn {
	box-shadow: none;
}

@media (min-width: 1025px) {
	.tr-shelf--lane {
		--tr-shelf-air: var(--space-3);
		--tr-shelf-lane: calc(40px + var(--tr-shelf-air) * 2);

		margin-inline: calc(var(--tiorai-archive-gutter) * -1);
		padding-inline: var(--tr-shelf-lane);
	}

	/*
	 * `.tr-carousel__controls` is `position: absolute; inset: 0`, so the buttons
	 * resolve their offsets against the carousel's PADDING box — this is 12px
	 * into the lane, not 12px into the cards. Specificity 0,3,0 against the
	 * component's 0,2,0, which is what lets one declaration each replace the
	 * shared `left/right: var(--space-1)`.
	 */
	.tr-shelf--lane .tr-carousel__btn[data-tiorai-carousel-prev] {
		left: var(--tr-shelf-air);
	}

	.tr-shelf--lane .tr-carousel__btn[data-tiorai-carousel-next] {
		right: var(--tr-shelf-air);
	}

	/* With the lane in place the fades have nothing left to do: the track ends on
	   a whole card, and the fade is positioned against the same padding box the
	   lane is, so it would wash the LANE — a pale strip beside the shelf, over
	   the page background, directly under the arrows sitting in it. */
	.tr-shelf--lane::before,
	.tr-shelf--lane::after {
		content: none;
	}
}