/**
 * The account card — one thing a customer owns, drawn as one `<li>`.
 *
 * Applied via f32_get_shared_asset_list() to every block that renders an account card:
 * sparklestock/downloads-library today, edd/order-history and edd/subscriptions when
 * their render callbacks are replaced. The markup comes from
 * \SparkleStock\SparkleStockBlocks\AccountCard\render() in the plugin — that function is
 * the class contract, and nothing else may emit `.account-card__*`.
 *
 * WHY THE CARD IS A FILE OF ITS OWN
 * ---------------------------------
 * These rules were `.downloads-library__card` and lived in the block's own stylesheet.
 * A download, an order and a subscription are one object with different fields, and
 * once an order draws through this card, a class named after the downloads library is a
 * lie on two thirds of its callers. Only the CARD moved. The block's chrome — the
 * toolbar, the chips, the pass lines, the grid the cards sit in, the pager, the empty
 * states — is still `.downloads-library__*` in
 * assets/blocks/sparklestock-downloads-library.css, because that chrome genuinely
 * belongs to that block and will not be reused.
 *
 * THE LIST STAYED BEHIND, and it is the one boundary case. `__list` is the `<ul>`, and
 * what it carries is a grid: a column count, a gutter and two container-query
 * breakpoints derived from how wide a CARD may be. That is the caller's arrangement of
 * many cards, not the card, and an order history will very likely want one wide column
 * where the library wants three. render() returns one `<li>` and never the `<ul>`
 * around it, so the list is literally outside the contract.
 *
 * ROWS, AND THE ARTWORK COMES WITH THEM. This paragraph used to read "Cards, not rows …
 * the artwork IS the product, so a row of text is a receipt and a card is a library",
 * and every clause of it has since been overtaken by the panels it described. Both
 * account lists carry `--rows` today — the order history and the download history — and
 * neither of them is a library: one is a ledger of what was bought and the other is a
 * ledger of what was taken. inc/account.php records that second change in as many words.
 *
 * What survived the change is the half about the pictures, and it is why these are rows
 * WITH artwork rather than rows of text. These products are colour grades, so a customer
 * scanning twenty of them recognises the thumbnail before they read the name; the Ledger
 * section keeps a 56×38 tile on every row for exactly that. What did not survive is the
 * conclusion that a full 16:9 band per row was worth the page height — measured, seven
 * deliveries cost 1447px on a phone — and the claim that there is deliberately no
 * compact-row fallback, which two callers now contradict.
 *
 * The card is still a card wherever it is drawn as one: `sparklestock/downloads-library`
 * puts it in a grid three across and nothing below has changed for it.
 *
 * Not wrapped in a cascade layer, for the reason the sibling files document:
 * WordPress serialises author layout choices as unlayered `.wp-container-…-is-layout-…`
 * rules, and an unlayered rule beats a layered one at any specificity.
 *
 * SCOPE, AND THE ONE SPECIFICITY THAT CHANGED
 * -------------------------------------------
 * Every rule below is scoped to `.account-card`, the `<li>` itself, rather than to a
 * block wrapper — the card has three of those and cannot name them. Descendants are
 * therefore `.account-card .account-card__x`, which is 0,2,0: the same score they
 * carried as `.downloads-library .downloads-library__x`, so nothing about the ladder
 * below moved with them.
 *
 * The ROOT rule is the exception. It was `.downloads-library .downloads-library__card`
 * at 0,2,0 and is now a bare `.account-card` at 0,1,0, because there is no ancestor
 * left to name. That is safe here and the check is recorded so it does not have to be
 * made again: the element is an `<li>` carrying one class, theme.json declares element
 * styles for `button`, `h1`–`h6`, `heading` and `link` and none for `li`, and no rule in
 * assets/css/account.css targets a list item. Nothing at 0,1,0 or above sets `display`,
 * `overflow`, `height`, `border-radius`, `background` or `box-shadow` on it. If a future
 * theme.json ever adds an `li` element style, this is the rule that loses.
 *
 * EVERY rule here that competes with core or theme.json is written at two classes or
 * more. That is the house rule, and this file has two places where it is the
 * difference between working and silently not working:
 *
 *   1. theme.json sets `styles.elements.link.color.text` to `primary`, emitted as
 *      `:root :where(a:where(:not(.wp-element-button)))`. Everything inside `:where()`
 *      scores nothing, so the leading `:root` is the whole score: 0,1,0. The download
 *      control is an ANCHOR on a black pill. A single-class `.account-card__download`
 *      would only TIE with that, the tie goes to whichever stylesheet printed last, and
 *      `wp_enqueue_block_style()` guarantees nothing about order — which is exactly how
 *      the mockup's own `.dl` shipped as black text on a black fill. Two classes settles
 *      it. The `:hover` half of the same element style is 0,2,0 (`:root` + `:hover`), so
 *      every hover rule that has to cancel the theme's underline is written at three.
 *
 *      The same element style catches the other anchors from the other direction, and
 *      every one of them is on the ladder for it: `__quiet` has to KEEP a muted ink that
 *      `primary` would repaint, and `__browse` and `__support` have to FORCE an underline
 *      that theme.json's `textDecoration: none` switches off at rest.
 *
 *   2. Core's flow layout is `:root :where(.is-layout-flow) > * { margin-block-start }`,
 *      also 0,1,0. Every margin below is therefore stated at two classes rather than
 *      trusted to source order.
 *
 * Ties BETWEEN rules in this file are fine — one stylesheet does guarantee source
 * order. Ties across stylesheets are the ones that bite.
 *
 * This file is also pulled into the Site Editor iframe by f32_editor_block_styles(),
 * so nothing here may assume a frontend-only DOM.
 *
 * Colour, radius and spacing come from theme.json only. Where the mockup used a value
 * the palette does not carry, the nearest token is used and the substitution is
 * recorded at the rule.
 */

/*
 * `[hidden]` must actually hide, and the card is the reason that has to be said here.
 *
 * The UA rule is `[hidden] { display: none }` at 0,1,0, and the card root sets
 * `display: flex` at the same score — author beats UA on a tie, so a card hidden
 * server-side would stay on screen. The downloads-library stylesheet repairs this for
 * everything inside that block with `[hidden][hidden]`, but a card rendered by
 * edd/order-history is nowhere near that selector. `.account-card[hidden]` is 0,1,1,
 * above the root rule at any source order and in any of the three callers.
 */
.account-card[hidden] {
	display: none;
}

/* --------------------------------------------------------------------- Card -- */

/*
 * One product. A column so `__foot` can be pushed to the bottom with `margin-block-start:
 * auto`, and `height: 100%` so every card in a row of three is as tall as the tallest —
 * a two-line product name beside a one-line one must not leave a short card floating.
 *
 * `overflow: hidden` is what clips the artwork to the top two corners, so `__art` needs
 * no radius of its own.
 *
 * The mockup's `--sk-sh-sm` is `shadow--sm` in theme.json, character for character, so
 * this is the one card in the file with no substitution to record. No border: the shadow
 * is the edge, which is the mockup's choice and the reason the cards read as objects
 * lifted off the panel rather than as cells in a table.
 *
 * THE SHELL IS `surface.object` IN theme.json AND NOT THESE FOUR VALUES, and that
 * indirection is the whole point of the token rather than a flourish. A shell is a
 * property of THE PAGE, not of what is inside the box: a customer reads the corner, the
 * lift and the inset of every object in the account as one vocabulary, and the moment two
 * stylesheets each hold their own copy of those numbers they are free to disagree. They
 * did - the subscription panel drew a 16px corner and a large shadow one `<h3>` from a
 * 4px corner and a small one, and nothing in either file could have caught it.
 *
 * So the numbers moved to the one place this theme already keeps colour, radius and
 * spacing, and both consumers read them: this rule and `.f32-plan` in
 * assets/css/account-plan.css. Changing a shell is now one edit in theme.json that both
 * objects take together, and disagreement is not a thing a future change can express.
 *
 * The literal fallbacks are still the card's own numbers, so a context with no theme.json
 * behind it - the Site Editor iframe mid-load, a half-deployed theme - draws the card it
 * always drew rather than an unstyled `<li>`.
 */
/*
 * THE SHELL IS A HAIRLINE NOW AND NOT A LIFT, and the swap happened in theme.json rather
 * than here - `surface.object` gained a `line` and its `shadow` became `none`. The reason
 * is the purchase confirmation: assets/css/order-receipt.css draws each bought product as
 * a white card with one `border-subtle` hairline, an `--lg` corner and NO shadow, because
 * the two cards on the checkout are drawn that way and the confirmation had to stop being
 * the only lifted object in the flow. The account is the other end of the same journey and
 * was still drawing its objects the older way, so a customer met two card vocabularies one
 * click apart.
 *
 * The `line` reads through the same token as the other four, which is what keeps this card
 * and `.f32-plan` unable to disagree about it - the argument the token exists for, made in
 * full above. `box-shadow` still reads the token rather than being deleted: the token is
 * where a shell is decided, and a future page that wants its objects lifted again changes
 * one value rather than hunting two stylesheets.
 *
 * THE FALLBACKS DISAGREED AND ONE OF THEM WAS WRONG. This rule and `.f32-plan` wrote
 * `4px`; `.f32-account-orders__list` in account.css wrote `16px`. theme.json resolves
 * `surface.object.radius` to `border-radius--lg`, which is 16px, so the fallback never
 * fired and the two files that believed 4px were never corrected by anything. They are
 * all 16px now. A fallback is a claim about what the token means, and three files
 * claiming two different things is the same defect the token was introduced to end -
 * it was just hiding one layer further down.
 */
.account-card {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	height: 100%;
	border: var(--wp--custom--surface--object--line, 1px solid #e0e0e0);
	border-radius: var(--wp--custom--surface--object--radius, 16px);
	background: var(--wp--custom--surface--object--fill, #ffffff);
	box-shadow: var(--wp--custom--surface--object--shadow, none);
}

/*
 * THE 16:9 BAND, and it holds that box whether or not the product has a featured image.
 *
 * `__art` is an anchor that the renderer leaves EMPTY when there is no thumbnail, so
 * `aspect-ratio` alone would still collapse without something to size against — hence
 * the explicit `width: 100%`, which gives the ratio a width to work from and a height to
 * derive. A collapsed band would make one card in a grid of three shorter than its
 * neighbours and move every card below it.
 *
 * `subtle` fills that empty band and the inset hairline keeps it from dissolving into
 * the white card — the same pair the old 40px thumbnail used, at card scale. The mockup
 * drew its own colour ramp here because the artifact CSP blocked the real images; that
 * is a specimen stand-in, not a design, so it is not reproduced.
 *
 * The element is `aria-hidden` with `tabindex="-1"` — the title below links to the same
 * URL — so it takes no focus ring and no hover treatment. It carries no text either,
 * which is why it needs no colour rule against theme.json's link element style.
 */
.account-card .account-card__art {
	display: block;
	/* `flex: 0 0 auto` because the band is a flex item of the card and the card is a
	   column: without it, a card left with negative free space could compress the one
	   part of itself that must keep its ratio. It never grows either — spare height
	   belongs to `__body`, which claims it with `flex: 1 1 auto`. */
	flex: 0 0 auto;
	/*
	 * `min-height: 0` IS WHAT MAKES THE LINE ABOVE IT TRUE. Without it `aspect-ratio`
	 * computes, applies, and is then thrown away, and this file shipped that way.
	 *
	 * A FLEX ITEM'S AUTOMATIC MINIMUM SIZE IS THE FAILURE, and it is not about images —
	 * the same trap is waiting for the next flex child anyone gives a ratio, a `height`
	 * or an `overflow` to. `min-height` initialises to `auto`, and on a flex item in the
	 * MAIN axis `auto` does not mean "no minimum": CSS Flexbox §4.5 resolves it to the
	 * item's CONTENT-BASED minimum size. The card is `flex-direction: column`, so the
	 * main axis is the block axis and the floor lands on HEIGHT. `aspect-ratio` only ever
	 * proposes a preferred size; a floor beats it outright, so the band grew to whatever
	 * its content was tall and the ratio became decoration.
	 *
	 * MEASURED ON STAGING BEFORE THE FIX, at a 936px panel and 458px columns:
	 * `getComputedStyle().aspectRatio` returned "16 / 9" — the rule was live — while order
	 * 299288's square product logo drew the band at 458 × 458 instead of 458 ÷ 16 × 9 =
	 * 257.6, and the wide-image card beside it in the SAME GRID ROW started its body
	 * 152.7px higher. At 390 a square logo took a 335 × 335 band, near enough a whole
	 * phone screen per card. Adding `min-height: 0` snapped the band to 257.6px exactly.
	 *
	 * IT IS NOT THE `img`. Setting the image to `height: auto` on the live page moved the
	 * band's box by nothing at all — the floor is the BAND's, taken from the content it
	 * happens to hold, and it applies just as much to an empty band that a future caller
	 * fills with anything taller than 9/16 of the card's width. The `img` rule below is
	 * about the picture FILLING the band, and it never held the box; the comment there
	 * used to imply it did and has been corrected.
	 *
	 * `min-width` is deliberately not stated. The automatic minimum applies in the MAIN
	 * axis only, and in a column container the inline axis is the cross axis, where
	 * `width: 100%` below already settles it.
	 */
	min-height: 0;
	width: 100%;
	aspect-ratio: 16 / 9;
	background: var(--wp--preset--color--subtle, #f5f5f5);
	box-shadow: inset 0 0 0 1px var(--wp--preset--color--border-subtle, #e0e0e0);
}

/*
 * THE PICTURE FILLS THE BAND. It does not size the band — see the `min-height: 0` note
 * above, which is where the ratio is actually won or lost, and which this comment used
 * to claim credit for.
 *
 * 0,2,1, and the score is still needed for what this rule DOES do. Core emits
 * `:root :where(img){max-width:100%;height:auto}` at 0,1,0; at one class the `height:
 * auto` half would tie and win on source order, and the image would draw at its own
 * intrinsic height inside a band already sized to 16:9 — short of the bottom edge on a
 * wide image, cropped by the card's `overflow: hidden` on a tall one. `height: 100%` plus
 * `object-fit: cover` is what makes a square logo and a 3:2 photograph both fill the same
 * box, centred and cropped, instead of letterboxed.
 */
.account-card .account-card__art img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/*
 * Everything below the band. `flex: 1 1 auto` is what makes the body absorb the card's
 * spare height, so `__foot`'s auto margin has room to push against.
 *
 * THE INSET IS ONE VALUE AND THE TOKEN CARRIES IT. This paragraph used to describe an
 * asymmetric `14px 14px 16px` shorthand from the mockup — 16px at the bottom against 14px
 * elsewhere, because the download pill's own optical weight needs a little more room under
 * it than beside it. theme.json does not hold that shorthand any more: `surface.object.pad`
 * is `var(--wp--preset--spacing--40)`, one value, 1rem on all four sides.
 *
 * THE FALLBACK SAYS 1rem FOR THAT REASON AND NOT AS TIDYING. A fallback that disagrees with
 * its token is a second design, reachable on the one load where theme.json fails, and this
 * one disagreed by 2px on three sides. Nobody would ever see it to report it.
 *
 * IT IS `surface.object.pad` FOR THE REASON THE ROOT RULE STATES, and the inset belongs
 * in that token rather than beside it: the distance from an object's edge to its first
 * word is read across every object on the page at once, so a subscription whose text
 * started 24px in while an order's started 14px in read as two different surfaces even
 * where the corners agreed.
 */
.account-card .account-card__body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 10px;
	padding: var(--wp--custom--surface--object--pad, 1rem);
}

/*
 * `min-width: 0` and `overflow-wrap` together are what let a 90-character product title
 * live in a 299px card: a grid column is `1fr`, which floors at the content's minimum
 * size, so an unbreakable title would widen its own column and shrink the other two.
 * The title wraps inside the card instead.
 *
 * `margin: 0` because this is an `<h3>` and both the UA and core's flow layout give it
 * one; the body's `gap` owns the spacing between the three parts of a card.
 *
 * No colour rule and no hover rule, deliberately. The title is a link, and theme.json
 * already paints links `primary` and underlines them on hover, which is exactly what
 * this wants — the one place in this file where inheriting the element style is the
 * correct answer. The mockup drew that underline as a `border-bottom` only because
 * its specimen killed `text-decoration` globally; reproducing it here would draw two
 * lines.
 */
.account-card .account-card__name {
	min-width: 0;
	margin: 0;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.3;
	overflow-wrap: break-word;
}

/*
 * Badge and date on one line, wrapping to two in a narrow card rather than truncating —
 * "Included with your pass" beside a date is 34 characters and a one-column card at
 * 320px cannot hold both.
 *
 * `margin: 0` for the same reason `__name` has it: this is a `<p>`.
 */
.account-card .account-card__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	min-width: 0;
	margin: 0;
}

/*
 * The badge answers "why can I download this", which is the question the old panel
 * could not answer at all. `nowrap`: "Included with your pass" broken across two
 * lines stops being a label and starts being a sentence.
 */
.account-card .account-card__badge {
	display: inline-flex;
	align-items: center;
	padding: 3px 9px;
	border-radius: var(--wp--custom--border-radius--full, 9999px);
	color: var(--wp--preset--color--primary, #000000);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.02em;
	line-height: 1.45;
	white-space: nowrap;
}

/*
 * Two fills, both from the palette, and the ring keeps a pale pill from dissolving
 * into the white card.
 *
 * SUBSTITUTIONS. The mockup set the badge ink to #0b4a4a and #065f46 — dark tints of
 * each fill — and the palette carries no dark teal and no dark green, so both take
 * `primary`, which is the strongest contrast available and is already the row's ink.
 * The purchased ring was #86e2bd, a mid mint with no token either; `teal` would have
 * collapsed the distinction between the two badges, so it takes the theme's hairline
 * instead. The pass ring is `teal`, which the mockup used as-is.
 */
.account-card .account-card__badge--pass {
	background: var(--wp--preset--color--teal-light, #c1f2f2);
	box-shadow: inset 0 0 0 1px var(--wp--preset--color--teal, #4ad9d9);
}

.account-card .account-card__badge--purchased {
	background: var(--wp--preset--color--price, #d1fae5);
	box-shadow: inset 0 0 0 1px var(--wp--preset--color--border-strong, #d1d5db);
}

/*
 * THE STATE REGISTER — the three kinds Orders and Subscriptions need.
 *
 * `pass` and `purchased` above answer WHY YOU HAVE IT; these three answer HOW IT
 * STANDS. The two registers never share a panel, which is what lets `active` sit on
 * the same `price` fill as `purchased` and be told apart by its ring: both mean the
 * good case, and no customer ever sees them side by side.
 *
 * Three and not six, because the KIND is a visual register and the LABEL is the
 * precise word — the same split the badge already documents. EDD's order statuses are
 * complete, refunded, partially_refunded, pending, abandoned, failed and whatever a
 * gateway extension adds; its subscription statuses are active, cancelled, expired,
 * failing and trialling. A register per status would be a stylesheet that has to be
 * edited every time a payment plugin is installed.
 *
 * `attention` takes gold rather than a red deliberately. `danger` #b91c1c is this
 * account's DESTRUCTIVE colour — it is the fill on Cancel Subscription in account.css —
 * and a badge sharing it would read as a control the customer is being asked to press.
 * (Coral is the BRAND colour and was retired from destructive duty; it would be a worse
 * badge fill still, because it would read as brand chrome rather than as status.)
 *
 * AND THERE IS NO `success`/`warning` PAIR TO REACH FOR INSTEAD. The palette briefly
 * carried one — `success-light` at the same hex as `price`, `warning-light` at the same
 * hex as `gold-light` — and it was removed before a single rule used it, precisely so
 * that these three declarations stay the only answer to "which colour means the good
 * case". A status fill in this theme is `price`, `subtle` or `gold-light`, chosen here
 * and reasoned about here; a second vocabulary for the same three states is not a
 * convenience, it is how two badges on one page end up two different greens. If a new
 * state genuinely needs a colour these three do not have, add the STATE, not a synonym.
 */
.account-card .account-card__badge--active {
	background: var(--wp--preset--color--price, #d1fae5);
	box-shadow: inset 0 0 0 1px var(--wp--preset--color--teal, #4ad9d9);
}

.account-card .account-card__badge--ended {
	background: var(--wp--preset--color--subtle, #f5f5f5);
	box-shadow: inset 0 0 0 1px var(--wp--preset--color--border-strong, #d1d5db);
}

.account-card .account-card__badge--attention {
	background: var(--wp--preset--color--gold-light, #fff4ca);
	box-shadow: inset 0 0 0 1px var(--wp--preset--color--gold, #ffe996);
}

/*
 * THE FALLBACK PILL, and it is not a status.
 *
 * AccountCard\BADGE_KINDS is a declared list, and a caller passing anything else gets
 * `--neutral` plus a `_doing_it_wrong()`. This rule is the half of that decision the
 * customer sees: without it the fallback would be a badge with an ink but no fill and
 * no ring, which reads as a label that failed to load rather than as a quiet one.
 *
 * `subtle` and `border-subtle` are the same pair the empty artwork band uses, so the
 * neutral badge is visibly the least emphatic of the three and introduces no token this
 * file did not already carry.
 */
.account-card .account-card__badge--neutral {
	background: var(--wp--preset--color--subtle, #f5f5f5);
	box-shadow: inset 0 0 0 1px var(--wp--preset--color--border-subtle, #e0e0e0);
}

/* Tabular figures so a column of dates lines up on the day rather than on the word. */
.account-card .account-card__when {
	color: var(--wp--preset--color--muted, #6b7280);
	font-size: 12.5px;
	font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------- Foot -- */

/*
 * The download control and the quiet link under it, pinned to the bottom of the card.
 *
 * `margin-block-start: auto` is the whole reason the card is a flex column: it eats the
 * spare height that `height: 100%` handed the card, so every foot in a row of three
 * lines up regardless of how many lines the title above it took.
 *
 * `align-items: flex-start` so `__quiet` is only as wide as its text — it is a link and
 * a link's underline should stop where the words do. `__download` overrides its own
 * cross size with `width: 100%` below.
 *
 * Stated at two classes because of the auto margin: core's flow layout writes
 * `margin-block-start` at 0,1,0 and would otherwise tie with it. See note 2 at the top.
 */
.account-card .account-card__foot {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 9px;
	min-width: 0;
	margin-block-start: auto;
}

/*
 * THE DOWNLOAD CONTROL. Two classes is not decoration here — see note 1 at the top of
 * this file. This is an anchor with white text on an `accent` fill, and at one class it
 * ties with theme.json's link colour and renders black on black.
 *
 * THE THREE PAINT PROPERTIES GO THROUGH VARIABLES, and the tier section at the bottom of
 * this file is why. A foot may now hold three or four of these, and the second and later
 * ones are drawn differently; a disclosure's pill is a `<summary>` inside a `<details>`,
 * so the only thing that can reach it from a rule keyed to the `<details>` is an
 * inherited value. Custom properties inherit and paint properties do not, which is the
 * whole reason for the indirection. Each falls back to the value this rule used to state
 * outright, so a tier that sets nothing is the primary blue pill, and every colour
 * still resolves to a theme.json preset with a literal fallback behind it.
 *
 * `border: 1px solid <edge, transparent>` replaced `border: 0` for the same reason. The
 * border box is painted with the element's own background by default, so a transparent
 * edge on the primary tier is invisible, and `box-sizing: border-box` keeps `min-height`
 * meaning the same thing with or without it — an outline tier that had to ADD a border
 * would otherwise be 2px taller than the pill above it.
 *
 * 44px, RAISED FROM THE MOCKUP'S 34. This is the standard the rest of the account panel
 * already holds itself to — assets/css/account.css states `min-height: 2.75rem` on
 * `a.edd-submit` with the reason, and the two controls on the subscription detail screen
 * measure exactly 44px today. The card's controls are now the ones a customer taps on a
 * phone in this panel, there are up to four of them on a subscription card, and a
 * secondary control cannot be TALLER than the primary one it sits under. The cost is 10px
 * of card height per control, which the downloads library pays too — same card, same
 * contract, same thumb; a Download pill that was 34px in the library and 44px in Orders
 * would be the card contradicting itself.
 */
.account-card .account-card__download {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	/* Full width of the card at every column count, which is the mockup's `.pcard__foot
	   .dl` rule. The pill is the thing the customer came for; it does not shrink to its
	   label inside a 299px card. The tier section overrides this for the controls AFTER
	   the first, which are not what the customer came for. */
	width: 100%;
	min-height: 44px;
	padding: 0 16px;
	border: 1px solid var(--f32-card-control-edge, transparent);
	border-radius: var(--wp--custom--border-radius--full, 9999px);
	background: var(--f32-card-control-fill, var(--wp--preset--color--accent, #1473e6));
	color: var(--f32-card-control-ink, var(--wp--preset--color--contrast, #ffffff));
	font-size: 13px;
	font-weight: 600;
	line-height: 1.45;
	white-space: nowrap;
	text-decoration: none;
}

/*
 * 0,3,0 and 0,2,2, because the theme's `a:hover` underline is 0,2,0 and a filled pill does
 * not underline.
 *
 * THE FILL AND NOT AN OPACITY, which is the change. The pill used to be `primary` black
 * and hovered by dropping to 85% opacity — a fill that gets LIGHTER under the pointer,
 * which is the exact move assets/css/account.css argues against on the profile submit
 * (`accent` #1473e6 is 4.53:1 under white, `action` #1d4ed8 is 7.44:1, so the control gets
 * darker and safer rather than lighter). The primary pill now takes the same two colours
 * the rest of this site's button vocabulary takes — the receipt exits pill in
 * assets/css/order-receipt.css and the profile submit in assets/css/account.css — so a
 * customer meets one blue action pill on the receipt, on the profile form and on the card.
 *
 * The edge variable is left at its `transparent` default rather than restated as `accent`.
 * A border box is painted with the element's own background, so a transparent edge over an
 * `accent` fill renders as `accent` and the pill measures the same as the outlined tiers.
 *
 * THE `<summary>` IS INCLUDED NOW and was not before. The old rule was stated on
 * `__download` only, so a first-position multi-file disclosure — the commonest control on
 * an order card — had no hover at all; the informational tone's rule below records that
 * gap in passing. Both halves set the same variable, so the tier and tone sections keep
 * winning it the way they already do: the secondary tier's hover is 0,5,0 / 0,4,2, the
 * danger tone's is 0,5,1 / 0,4,2 and the informational tone's is 0,3,2, all above these.
 * Their `opacity: 1` declarations now cancel nothing and are left alone rather than
 * chased through four sections for no rendered difference.
 */
.account-card .account-card__download:hover,
.account-card .account-card__download:focus-visible,
.account-card .account-card__foot summary:hover,
.account-card .account-card__foot summary:focus-visible {
	--f32-card-control-fill: var(--wp--preset--color--action, #1d4ed8);
	text-decoration: none;
}

/*
 * More than one file is a `<details>`, never a bare link that silently gives the
 * first of several. Targeted by element inside the fixed `__foot` class rather
 * than by a class of its own: the markup contract does not name these parts, and an
 * invented class name the block does not emit would style nothing.
 *
 * At 0,2,1 the summary clears theme.json's element styles the same way `__download`
 * does, and it is drawn as the same pill so one file and four files present the same
 * affordance.
 */
.account-card .account-card__foot details {
	width: 100%;
}

.account-card .account-card__foot summary {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	width: 100%;
	min-height: 44px;
	padding: 0 16px;
	border: 1px solid var(--f32-card-control-edge, transparent);
	border-radius: var(--wp--custom--border-radius--full, 9999px);
	background: var(--f32-card-control-fill, var(--wp--preset--color--accent, #1473e6));
	color: var(--f32-card-control-ink, var(--wp--preset--color--contrast, #ffffff));
	font-size: 13px;
	font-weight: 600;
	line-height: 1.45;
	list-style: none;
	cursor: pointer;
}

/* The two rules that stop the browser drawing its own disclosure triangle inside the
   pill. `display: flex` above has already removed it in most engines. */
.account-card .account-card__foot summary::-webkit-details-marker {
	display: none;
}

.account-card .account-card__foot details[open] summary {
	margin-block-end: 8px;
}

/*
 * THE LIST INSIDE A DISCLOSURE — quiet in COLOUR, never in TARGET, and the second half of
 * that sentence is what this rule was missing.
 *
 * MEASURED: every child of every disclosure on this panel drew at 430.0 × 18.1,
 * `color: rgb(107,114,128)`, `text-decoration: none`, 12.5px. Two separate faults in one
 * rule, and the second is the serious one — these are the three item links on an order
 * card AND the confirmation inside Cancel Subscription, and at rest they were the same
 * grey as `__when` on the line above with nothing at all marking them as links.
 *
 * THE TARGET. 44px, which is this panel's floor and not a number invented here:
 * assets/css/account.css states it on `a.edd-submit` and on the pager with the full
 * argument, and this file states it on `__download`, on `summary` and on everything in
 * the passthrough slot. There is no reading of WCAG 2.5.8 that exempts these. They are
 * NOT the Inline exception — that covers a target whose size is constrained by the
 * line-height of the sentence AROUND it, and a disclosure's children are standalone
 * links in a list with no sentence to sit inside. Nor is there an Equivalent: the file
 * a customer wants is reachable through this link and no other. On an order with three
 * items that turns a 54px list into 132px, inside a disclosure the customer opened on
 * purpose, which is the cheapest height on the card.
 *
 * `display: flex` rather than `block`, so `min-height` CENTRES the label. A 44px block
 * leaves the text sitting on the top edge and the extra 26px reads as a gap rather than
 * as part of the control.
 *
 * THE UNDERLINE, AND WHY IT HAS TO BE AT REST. theme.json switches the link underline off
 * at 0,1,0 and back on at `:hover` at 0,2,0, so a link marked only on hover is a link
 * that is unmarked for every customer not holding a mouse — the same collision
 * `__browse` documents in the sibling stylesheet, in the same direction. This rule is
 * 0,2,1, two classes and the `a`, which clears the rest state outright.
 *
 * THE INK STAYS `muted`. #6b7280 on white is 4.83:1 and passes AA at 12.5px, the pill
 * above is still the control, and four black lines under it would still read as four
 * products rather than one — that has always been this rule's argument and it survives.
 * What was missing was the underline and the box, not the colour.
 */
.account-card .account-card__foot details a {
	display: flex;
	align-items: center;
	min-height: 44px;
	margin-block-start: 4px;
	color: var(--wp--preset--color--muted, #6b7280);
	font-size: 12.5px;
	line-height: 1.45;
	text-decoration: underline;
	text-underline-offset: 2px;
}

/*
 * 0,3,1. The theme's `a:hover` underline is 0,2,0 and is written as the `text-decoration`
 * SHORTHAND, which resets the thickness longhand to `auto` — so hovering would visibly
 * THIN the underline this rule now draws at rest unless the thickening is stated above
 * it. `__browse` in the sibling stylesheet makes the same repair for the same reason.
 */
.account-card .account-card__foot details a:hover {
	color: var(--wp--preset--color--primary, #000000);
	text-decoration: underline;
	text-decoration-thickness: 2px;
}

/*
 * THE CONFIRMATION INSIDE A DESTRUCTIVE DISCLOSURE. On the subscription card that is
 * "Yes, cancel it. No further payments will be taken." — the most irreversible control on
 * this account — and it measured 430.0 × 18.1 in `muted` grey with no underline. The rule
 * above repairs the target and the marking for every disclosure; this is the half only the
 * danger tone gets, and it exists because "findable" and "not hit by accident" are two
 * requirements that pull in opposite directions and need two separate devices rather than
 * one compromise.
 *
 * THE HANDLE IS THE ANCESTOR'S ATTRIBUTE, and that is not a workaround. `AccountCard\
 * action()` puts `data-tone="danger"` on the `<details>`, and the contract that file and
 * this one state TOGETHER is that a disclosure's children are bare and unclassed so the
 * stylesheet reaches them through `.account-card__foot details`. That constraint still
 * holds — nothing here asks the plugin for a class. Descending from the attribute is
 * exactly the seam the attribute was chosen for; see the danger-tone note further down,
 * which makes the same case for the `<summary>`.
 *
 * FINDABLE is the pill and the `danger` edge. It stops being a grey line in a list and
 * becomes a control drawn in this account's destructive register — the same register the
 * summary above it and `a.edd-submit.edd-subscription-cancel` in assets/css/account.css
 * are drawn in.
 *
 * NOT HIT BY ACCIDENT is CLEARANCE, which is the stronger of the two devices and the one
 * that is arithmetic rather than judgment. The finger that opened the disclosure was at
 * the summary's centre. The summary is 44px, so its lower edge is 22px below that point;
 * `details[open] summary` adds 8px and this rule's own 12px makes 42px — one full target
 * height between where the customer tapped and where the irreversible control appears. The
 * 4px the base rule uses would have left 34px, which is less than the control's own height
 * and is the distance a thumb travels on a scroll that did not quite take.
 *
 * THE INK IS `primary` AND THE FILL IS WHITE, and it is measured. `danger` #b91c1c as
 * text on white is 6.47:1 and would in fact pass, but the ink stays black so that this
 * outlined control reads as the QUIETER half of the destructive pair — the summary above
 * it is the filled one. `danger` is the EDGE here, and an edge needs 3:1 against its own
 * background to be seen: #b91c1c on white is 6.47:1 and clears it outright. On hover the
 * box fills with `danger` and the ink flips to white, because black on #b91c1c is 3.25:1
 * and fails where white is 6.47:1. The edge was coral until the semantic tokens landed;
 * coral is the BRAND colour and no longer speaks for destruction anywhere in this file.
 *
 * AN OUTLINE UNDER A FILLED SUMMARY, which is the ladder the disclosure was built to draw:
 * the `danger` pill above is the door, this is the deliberate second act, and `:hover` fills
 * it so the commitment is visible BEFORE the click rather than after it.
 *
 * `inline-flex` shrinks it to its label, so the card either side of it is inert — but the
 * sentence is 48 characters and at a 335px card it wraps and takes the full width anyway.
 * That is the outcome the width note below already blesses: "a long confirmation" wants
 * the card's full width, and the clearance above is what keeps it safe there. Vertical
 * padding rather than the base rule's bare `min-height`, because a wrapped two-line
 * confirmation is 37.7px of text and would otherwise sit hard against a 44px box.
 *
 * NO UNDERLINE. Inside a pill the box IS the affordance, which is why `__download` and
 * `summary` both switch it off; a line as well would be two marks saying one thing.
 *
 * 0,3,2 — `.account-card` + `.account-card__foot` + `[data-tone="danger"]`, plus `details`
 * and `a`. It beats the base disclosure rule's 0,2,1 outright rather than on source order,
 * which matters because the two set seven of the same properties.
 */
.account-card .account-card__foot details[data-tone="danger"] a {
	display: inline-flex;
	justify-content: center;
	max-width: 100%;
	margin-block-start: 12px;
	padding: 10px 16px;
	border: 1px solid var(--wp--preset--color--danger, #b91c1c);
	border-radius: var(--wp--custom--border-radius--full, 9999px);
	color: var(--wp--preset--color--primary, #000000);
	font-size: 13px;
	font-weight: 600;
	text-align: center;
	text-decoration: none;
}

/*
 * 0,4,2, over the base disclosure hover at 0,3,1 and the theme's `a:hover` at 0,2,0. The
 * `text-decoration: none` shorthand is what cancels the base hover's 2px thickening as
 * well as its underline, so the longhand does not have to be restated.
 *
 * It FILLS rather than brightening, because there is nothing to brighten — this is the
 * outline half of the destructive register and the fill is the register's own `danger`
 * #b91c1c. THE INK FLIPS ON HOVER and that is arithmetic, not taste: at rest the ink is
 * black on a white card at 21:1, and on the crimson fill black would be 3.25:1 and FAIL,
 * where white is 6.47:1. So the hover takes `contrast`. The old note reasoned from coral
 * (black on #ee383a at 5.26:1) and no longer applies — coral is the BRAND colour and was
 * retired from destructive duty; `danger` carries it now. The danger tier's `color-mix`
 * towards `danger-light` belongs to controls that are ALREADY danger-filled and would
 * otherwise have no hover at all.
 */
.account-card .account-card__foot details[data-tone="danger"] a:hover {
	background: var(--wp--preset--color--danger, #b91c1c);
	color: var(--wp--preset--color--contrast, #ffffff);
	text-decoration: none;
}

/*
 * The second route to the same product page, under the button. It is deliberately the
 * quietest thing on the card: the title above already links there, and this repeats it
 * only because the title is not where a customer looks for a way OUT of the library.
 *
 * The same object as `.downloads-library__clear` in the block's own stylesheet, and
 * drawn the same way for the same reason — the mockup marked it with a `border-bottom`
 * because its specimen killed `text-decoration` globally, and here
 * `text-decoration: none` has to be stated at 0,2,0 for the rest to be true, or
 * theme.json's link underline draws a second line under the border. The hover is 0,3,0,
 * which is where the theme's `a:hover` underline lives.
 *
 * IT IS THE ONE CONTROL ON THIS PANEL THAT DOES NOT TAKE THE 44px FLOOR, and that is a
 * decision rather than an oversight, so it is recorded here. It measures 111.7 × 19.1 and
 * it stays there.
 *
 * WCAG 2.5.8's EQUIVALENT exception is exactly this case and is the whole argument: a
 * target may be under the floor where "the function can be achieved through a different
 * control on the same page that meets the criterion". `__name` directly above is an anchor
 * to the SAME url in a 15px/700 heading spanning the card's full width, and the artwork
 * band above THAT is a third route to it — this link exists only because the title is not
 * where a customer looks for a way out of the library, which is the paragraph above. Every
 * other control this panel raised had no equivalent anywhere: a file link inside a
 * disclosure is the only route to that file, and a filter chip is the only route to that
 * filter.
 *
 * THE COST OF RAISING IT IS THE OTHER HALF. 44px is +25px on every card, and the library
 * pages 24 cards at a time — 600px of extra page height at one column, added to the
 * quietest thing on the card in order to duplicate a target that is already there. A panel
 * that raised this would be enforcing a floor it does not need against a page it makes
 * measurably worse to scroll.
 */
.account-card .account-card__quiet {
	border-bottom: 1px solid transparent;
	color: var(--wp--preset--color--muted, #6b7280);
	font-size: 12.5px;
	line-height: 1.45;
	text-decoration: none;
}

.account-card .account-card__quiet:hover {
	border-bottom-color: var(--wp--preset--color--border-strong, #d1d5db);
	color: var(--wp--preset--color--primary, #000000);
	text-decoration: none;
}

/*
 * A card whose `edd_all_access_check()` failed. It is INFORMATIVE, not an error: the
 * customer has done nothing wrong, the entitlement simply is not there today, and a
 * lapsed pass is the ordinary reason. So there is no `danger`, no icon, no border and
 * no fill — it is the same muted ink the date uses, sitting where the button would
 * have been. The card is still listed, because silently dropping it would leave the
 * customer counting their own library and coming up short.
 */
.account-card .account-card__unavailable {
	min-width: 0;
	color: var(--wp--preset--color--muted, #6b7280);
	font-size: 12.5px;
	line-height: 1.4;
	overflow-wrap: break-word;
}


/* ----------------------------------------------------------- Control tiers -- */

/*
 * ONE FOOT, MORE THAN ONE CONTROL — the density problem the two Orders callers created,
 * and which the disclosure note at `details a` above already argued one level down.
 *
 * The Library gives a card ONE action. Orders and Subscriptions give it several: an
 * order with three items and an invoice draws the items disclosure, View Order Details
 * and View Invoice, and a Stripe subscription draws Update payment method, Renew now,
 * Reactivate and Cancel. Drawn as the base pill they are three or four full-width black
 * bars in a 270px card, and "four black pills stacked would read as four products rather
 * than one" is exactly as true here as it is inside the disclosure.
 *
 * TWO WEIGHTS, AND THEY ARE NOT NEW. assets/css/account.css already states this account's
 * control hierarchy on the subscription detail screen: filled means this CHANGES
 * something, outlined means this only MOVES you. Almost everything that stacks on these
 * cards moves you — View Order Details, View Invoice, View Licenses, Update payment
 * method all navigate — so the outline is what that rule already says they should be, and
 * this section is that decision arriving on the list.
 *
 * The values are borrowed intact: a `muted` edge, because a control's boundary has to
 * clear 3:1 against its own background to be seen and #6b7280 on white is 4.8:1 where
 * #e0e0e0 is 1.5:1; a `subtle` fill and a `primary` edge on hover. Only the type is the
 * card's own — 13px/600 rather than the panel's 15px/500 — because a card that changed
 * its type size for its second control would read as two different kinds of control
 * rather than two weights of one.
 *
 * WHY POSITION AND NOT KIND. `AccountCard\ACTION_KINDS` is link, disclosure and note, and
 * none of the three says whether following it alters the customer's account: View Invoice
 * and Cancel Subscription are both a `link` shaped identically. CSS cannot read intent
 * the contract does not carry. What it can read is ORDER, and both callers already sort
 * by priority — Orders leads with the items disclosure because "what did I pay for" is
 * the question the panel is open to answer, and Subscriptions puts "the three moves first
 * and the destructive one last". So the FIRST control keeps the filled pill and every
 * control after it is outlined. Where a caller's first control is genuinely a navigation
 * this over-promotes it by one weight; that is a caller ordering its own actions, which
 * is the caller's to fix and not something a stylesheet should second-guess.
 *
 * They also stop being full width. `align-items: flex-start` on `__foot` already sizes a
 * flex item to its content, so `width: auto` is the whole change — the secondary controls
 * shrink to their labels and the one filled pill is the only bar across the card.
 *
 * ON A DISCLOSURE THE WIDTH GOES ON THE `<summary>` AND NOT ON THE `<details>`, which was
 * measured rather than reasoned. Shrinking the `<details>` works and looks wrong: its
 * `fit-content` is its widest child in whichever state it is in, so opening Cancel on a
 * 390px screen grew the pill from 159.5px to 288px as the confirmation sentence inside it
 * claimed the box. A control that changes size when you open it reads as a layout bug at
 * the exact moment the customer is being asked to be careful. Pinning the summary instead
 * keeps the pill at its label in both states and lets the sentence have the card's full
 * width, which is also where a long confirmation wants to be.
 *
 * SPECIFICITY, rule by rule, and the general sibling combinator is load-bearing in all of
 * them: `~` and not `+`, because the orders harvest appends a `note` for any text an
 * extension printed outside an anchor, and a note between two controls must not make the
 * one after it look like the first again.
 */
.account-card .account-card__foot > :is(.account-card__download, details) ~ .account-card__download,
.account-card .account-card__foot > :is(.account-card__download, details) ~ details {
	/*
	 * 0,4,0 and 0,3,1. `:is()` scores as its heaviest argument, so the `:is(…, details)`
	 * step counts as one class in both. Nothing else sets these three properties, so
	 * neither score has anything to beat — they are recorded because the rule below
	 * shares this selector's shape and does.
	 */
	--f32-card-control-fill: var(--wp--preset--color--contrast, #ffffff);
	--f32-card-control-ink: var(--wp--preset--color--primary, #000000);
	--f32-card-control-edge: var(--wp--preset--color--muted, #6b7280);
}

/*
 * 0,4,0 and 0,3,2, over `.account-card .account-card__download` (0,2,0) and `.account-card
 * .account-card__foot summary` (0,2,1), which is where `width: 100%` is stated. The
 * `<details>` itself is left alone deliberately; see the note above.
 */
.account-card .account-card__foot > :is(.account-card__download, details) ~ .account-card__download,
.account-card .account-card__foot > :is(.account-card__download, details) ~ details > summary {
	width: auto;
}

/*
 * 0,5,1 and 0,4,2, and BOTH states, not just hover. The primary rule above now sets its
 * fill on the `<summary>` DIRECTLY for `:hover` and `:focus-visible` alike, and a
 * declared value beats an inherited one whatever the two specificities are — that is
 * the mechanism the whole variable indirection exists for. The tier sets its rest
 * variables on the `<details>`, which the summary only INHERITS, so without a
 * `:focus-visible` half here a keyboard-focused second-position disclosure would flip
 * to the primary rule's `action` fill while keeping the tier's black ink. The second
 * selector states the two properties on the `<summary>` directly for the same reason.
 */
.account-card .account-card__foot > :is(.account-card__download, details) ~ .account-card__download:hover,
.account-card .account-card__foot > :is(.account-card__download, details) ~ .account-card__download:focus-visible,
.account-card .account-card__foot > :is(.account-card__download, details) ~ details > summary:hover,
.account-card .account-card__foot > :is(.account-card__download, details) ~ details > summary:focus-visible {
	--f32-card-control-fill: var(--wp--preset--color--subtle, #f5f5f5);
	--f32-card-control-edge: var(--wp--preset--color--primary, #000000);
}

/*
 * THE INFORMATIONAL TONE — the rung BELOW the position tiers, and the reason it exists at
 * all is a case the tiers above cannot decide and must not try to.
 *
 * WHAT WAS WRONG. Order card 299287, measured live at 1280: the `<summary>` reading
 * "3 items on this order" drew at 430 × 44, white on black, weight 600 — the loudest
 * control on the card — while `View Order Details` (150.8 × 44) and `View Invoice`
 * (113.8 × 44) sat beside it as outlines. A control that only expands a list of product
 * names was the card's call to action, and the two controls that actually take the
 * customer somewhere were secondary to it. The position tier above did that, and it did it
 * by working as designed: it promotes the FIRST control in the foot, the Orders caller
 * lists its items disclosure first, and "what did I pay for" genuinely is the question the
 * panel is open to answer — so the ordering is right and the weight it earns is wrong.
 *
 * WHY THIS COULD NOT BE FIXED HERE, AND THE PROOF IS RECORDED SO IT IS NOT RE-ATTEMPTED.
 * The exact markup `AccountCard\action()` emits for a `disclosure` was synthesised into a
 * DOWNLOADS-LIBRARY card foot on the live page. It measured 270.7 × 44, white on black —
 * and there that is CORRECT, because a library disclosure says "Download (3 files)" and
 * handing over the files is the whole point of that card. Byte-for-byte the same DOM, the
 * same rule, and opposite right answers. The distinction is not in the element (both
 * `<details>`), not in the position (both first in `__foot`), and not reachable from the
 * children without reading EDD's private `eddfile` URL shape — a theme betting on a
 * plugin's internals. It is SEMANTIC, so it belongs to the caller, and it arrives here as
 * an attribute the caller set. See `AccountCard\ACTION_TONES` for the ladder.
 *
 * A TONE OUTRANKS A POSITION BECAUSE A TONE IS A FACT AND A POSITION IS A GUESS. The tier
 * section above says so itself: "Where a caller's first control is genuinely a navigation
 * this over-promotes it by one weight". `informational` is the caller answering that, and
 * `danger` still outranks both — printed after this, so the tie it has with these rules
 * goes to it.
 *
 * THE TREATMENT: A GHOST CONTROL WITH ITS DISCLOSURE MARKER PUT BACK.
 *
 *   QUIETER THAN THE OUTLINE TIER, because it does less. The outline means "this moves you
 *   between views"; this one does not even do that. So it drops the tier's visible `muted`
 *   ring and its `contrast` fill and keeps only the geometry — 44px, the pill radius, the
 *   base rule's `padding: 0 16px` — so its label sits on the SAME x as the labels of the
 *   outline pills below it and the three controls still read as one group.
 *
 *   STILL OBVIOUSLY OPERABLE, and this is the half a ghost control normally fails. The
 *   base `summary` rule kills the browser's disclosure triangle, because inside a filled
 *   pill the box IS the affordance and a marker as well would be two marks saying one
 *   thing. With no box there are no such marks, so the marker comes BACK — drawn here
 *   rather than left to `list-style`, which needs `display: list-item` and would cost the
 *   flex centring that makes `min-height: 44px` centre its label instead of stranding it
 *   on the top edge. It is the native, universally understood sign for "this reveals
 *   more", which is exactly and only what this control does.
 *
 *   IT IS NOT A PALER RING. This file has already recorded the arithmetic that rules that
 *   out: a control's boundary has to clear 3:1 against its own background to be seen, and
 *   `border-subtle` #e0e0e0 on white is 1.5:1 where `muted` #6b7280 is 4.8:1. There is no
 *   ring available between "the outline tier's ring" and "no ring", so the quiet rung has
 *   to be made somewhere other than the border — which is why it is made in the MARKER and
 *   in the WEIGHT. The ink stays `primary` at 21:1 and the label stays 13px: the tier
 *   section above forbids changing the SIZE ("a card that changed its type size for its
 *   second control would read as two different kinds of control rather than two weights of
 *   one"), and weight is the axis that argument leaves open. 600 → 500, and Inter ships a
 *   real 500 — theme.json registers it as a static face as well as inside the 400–800
 *   variable range — so this is a drawn weight and not a synthesised one.
 *
 *   IT DOES NOT COLLIDE WITH `__unavailable`, the other quiet thing that can appear in a
 *   foot and is deliberately NOT a control. That is `muted` ink at 12.5px with no marker
 *   and no target; this is `primary` ink at 13px/500 with a marker in a 44px box.
 *
 * THE CONSEQUENCE, WRITTEN DOWN SO NOBODY "FIXES" IT. An order card now has NO FILLED
 * CONTROL AT ALL. `View Order Details` and `View Invoice` arrive through `__raw`, and the
 * passthrough slot outlines every anchor and promotes none — on purpose, because when
 * several arrive the card has no way to know which the customer wants. That is CORRECT and
 * it is not a gap. assets/css/account.css states this account's hierarchy as: solid means
 * this CHANGES something, outline means this only MOVES you between views. Both of those
 * controls only move you. A card whose every control is navigation has nothing to fill, and
 * filling one anyway would be the card claiming a consequence that is not there — which is
 * the same mistake, one rung up, that this whole section exists to undo. DO NOT PROMOTE
 * ONE.
 *
 * 0,3,2 — `.account-card` + `.account-card__foot` + `[data-tone="informational"]`, plus
 * `details` and `summary`. What it has to beat, checked against what is actually in this
 * file rather than assumed:
 *
 *   - The base `.account-card .account-card__foot summary` at 0,2,1, which is where the
 *     black pill's `width: 100%`, its padding and its `font-weight: 600` are stated.
 *     Beaten outright.
 *   - The position tier's variables, set at 0,3,1 on the `<details>` and reaching the
 *     `<summary>` only by INHERITANCE. A declared value beats an inherited one at any
 *     specificity — the mechanism the whole `--f32-card-control-*` indirection exists for
 *     — so this wins there without needing the score at all.
 *   - The position tier's `width: auto`, stated on `~ details > summary` at 0,3,2. That is
 *     a TIE, resolved by source order — same file, printed after it, which is the tie this
 *     file's header blesses — and both declare the same value in any case.
 *   - The danger tone at 0,3,2 on the same `<summary>`, also a tie and also resolved by
 *     source order, in danger's favour. That is the right way round, and it is unreachable
 *     anyway: `tone` is one value, so no element can carry both attributes.
 *
 * There is deliberately NO companion rule on the `<details>` itself. It would have nothing
 * to declare: the rule below wins the variables by DECLARATION rather than by score, so a
 * details-level copy would be dead weight — and `width` on the `<details>` is left alone
 * for the measured reason the tier section records, that its `fit-content` is its widest
 * child, so pinning it makes the control change size at the moment the customer opens it.
 */
.account-card .account-card__foot > details[data-tone="informational"] > summary {
	--f32-card-control-fill: transparent;
	--f32-card-control-ink: var(--wp--preset--color--primary, #000000);
	--f32-card-control-edge: transparent;
	/* Content width, like every non-primary control in this foot. Stated here rather than
	   left to the position tier so that the tone does not depend on POSITION — the same
	   reason the danger tone repeats it. An informational control is quiet wherever a
	   caller happens to list it, including first, which is exactly where the Orders one
	   is and is the whole reason this section had to be written. */
	width: auto;
	font-weight: 500;
}

/*
 * THE MARKER. 0,3,3 — the rule above plus the pseudo-element. Nothing else in this file
 * and nothing theme.json emits targets a `summary::after`, so it has nothing to beat.
 *
 * A CSS triangle rather than a glyph, because a glyph's box is whatever the font decides
 * and Inter is a variable face loaded over the network: a marker sized by the font shifts
 * when the webfont swaps in, and a control that appears to move as the page settles is the
 * thing this card's `min-height: 0` note already spent a paragraph eliminating elsewhere.
 *
 * TRAILING AND POINTING DOWN, which is the accordion convention and the one that keeps the
 * LABEL aligned with the labels of the outline pills below it — a leading marker would push
 * the words 13px to their right and break the group. `currentColor` so it is always the
 * control's own ink; it inherits `primary` from the rule above at 21:1, well clear of the
 * 3:1 that a graphic identifying a control has to hold.
 *
 * `flex: 0 0 auto` because a `<summary>` is a flex container here and this is one of its
 * items: a zero-width box carrying only borders is otherwise a candidate for shrinking, and
 * a shrunk triangle is a smudge. The 7px between it and the label is the base rule's `gap`.
 */
.account-card .account-card__foot > details[data-tone="informational"] > summary::after {
	content: "";
	flex: 0 0 auto;
	width: 0;
	height: 0;
	border-block-start: 6px solid currentColor;
	border-inline: 4px solid transparent;
}

/*
 * 0,4,3, over the rest state at 0,3,3 — `[open]` is the fourth step in the class column.
 *
 * 180deg and not 90: the border box is 8 × 6 with the triangle filling it, so a half turn
 * lands an up-triangle exactly where the down-triangle was. A quarter turn would rotate a
 * non-square box and shift the marker sideways at the moment the list appears.
 *
 * NO TRANSITION, deliberately. The rotations in this codebase that do animate live in
 * assets/blocks/sparklestock-docs-index.css and carry a `prefers-reduced-motion` block with
 * them; a 180deg spin is exactly the motion that block exists to switch off, and a marker
 * that flips instantly needs neither the animation nor the media query to go with it.
 */
.account-card .account-card__foot > details[data-tone="informational"][open] > summary::after {
	transform: rotate(180deg);
}

/*
 * 0,4,2. It TIES with the position tier's hover above and with the danger tone's hover
 * below, both of which are also 0,4,2 on a `<summary>`; it is printed between them, which
 * is the order the ladder wants, and it can never actually meet the danger one.
 *
 * `subtle` is the same fill the outline tier takes on hover, so the two quiet registers a
 * customer meets on one card are one hover behaviour rather than two. It also has to
 * exist at 0,4,2: the primary rule now reaches a `<summary>` directly on hover and
 * focus, and without this counterpart an informational control would flip to the
 * primary `action` fill instead of staying quiet.
 *
 * The edge stays transparent on purpose. Growing a ring on hover would make the control
 * change shape under the pointer and would promote it, for as long as the pointer is
 * there, to the tier this whole section exists to demote it out of.
 */
.account-card .account-card__foot > details[data-tone="informational"] > summary:hover {
	--f32-card-control-fill: var(--wp--preset--color--subtle, #f5f5f5);
}

/*
 * THE DESTRUCTIVE TONE. `data-tone="danger"` on the element `AccountCard\action()`
 * returns — the `<a class="account-card__download">` for a `link`, the `<details>` for a
 * `disclosure` — and nothing else. That is the whole selector contract, and it was chosen
 * over a `--danger` modifier class for two reasons: one attribute spells the same tone on
 * both element shapes, where a class would have to be `account-card__download--danger` on
 * one and a name the `<details>` does not currently carry on the other; and the
 * disclosure note above states that the elements inside a disclosure take "bare elements,
 * no classes", which an attribute does not violate. `default` emits nothing.
 *
 * WHY THIS IS ONE DECISION WITH account.css AND NOT A SECOND ONE. `danger` #b91c1c is
 * this account's destructive colour: `a.edd-submit.edd-subscription-cancel` fills Cancel
 * with it on the subscription detail screen, which still renders through the delegation
 * seam and still has to keep working. The fill, the ink and the hover mix here are that
 * rule's, value for value.
 *
 * IT USED TO BE CORAL AND IS NOT ANY MORE. Coral #ee383a is the BRAND colour — logo,
 * brand furniture, and reversible brand hovers such as the filter chip in
 * archive-download.css, which deliberately keeps it. A colour cannot mean "this is us"
 * and "this is irreversible" on one page, so coral was retired from destructive duty and
 * theme.json gained `success`/`warning`/`danger` and their washes.
 *
 * THE INK IS `contrast`, and the arithmetic inverted with the hue. On coral, black was
 * 5.26:1 and white 3.99:1, so the ink was `primary`. On #b91c1c black is 3.25:1 and FAILS
 * AA, white is 6.47:1 and passes. The hover still brightens rather than darkens — there
 * is no darker palette red to reach for — and `color-mix(in srgb, danger 80%,
 * danger-light)` is rgb(199, 68, 68), WHITE ON IT AT 4.84:1, over the 4.5:1 floor.
 *
 * IT IS A TONE, NOT A TIER, and the two are orthogonal on purpose. The disclosure is what
 * makes Cancel SAFE — one deliberate act to open it and a second to follow the link, with
 * no JavaScript, which is why the subscriptions caller made it a `<details>` at all. The
 * colour is what makes it LOOK destructive. Before this rule the summary was drawn
 * identically to "Renew now" sitting above it, so the card's most irreversible control was
 * its quietest signal.
 *
 * The destructive register does not collide with the badge register: `__badge--attention`
 * deliberately takes gold rather than any red so that a status never reads as a control
 * the customer is being asked to press. This is the other half of that sentence.
 */
/*
 * 0,4,1 and 0,3,2. The anchor carries its element qualifier so it beats the secondary
 * tier's 0,4,0 outright rather than on source order. The summary half needs no such help
 * for the three custom properties: the secondary tier sets those on the `<details>` and
 * reaches the summary only by inheritance, and a declared value beats an inherited one at
 * any specificity. It does need it for `width`, and 0,3,2 ties there with the secondary
 * tier's own 0,3,2 — same file, printed after it, which is the tie this file's header
 * blesses, and both declare the same value anyway.
 *
 * `width` is repeated here rather than left to the tier above so that the tone does not
 * depend on POSITION. A destructive control is content width wherever a caller happens to
 * list it, including first.
 */
.account-card .account-card__foot > a.account-card__download[data-tone="danger"],
.account-card .account-card__foot > details[data-tone="danger"] > summary {
	--f32-card-control-fill: var(--wp--preset--color--danger, #b91c1c);
	--f32-card-control-ink: var(--wp--preset--color--contrast, #ffffff);
	--f32-card-control-edge: var(--wp--preset--color--danger, #b91c1c);
	width: auto;
}

/*
 * 0,5,1 and 0,4,2. The second TIES with the secondary tier's hover, which is also 0,4,2 on
 * the same `<summary>`; it is printed after it and one stylesheet does guarantee source
 * order, which is the tie this file's header says is fine. The first does not tie with
 * anything.
 */
.account-card .account-card__foot > a.account-card__download[data-tone="danger"]:hover,
.account-card .account-card__foot > details[data-tone="danger"] > summary:hover {
	--f32-card-control-fill: color-mix(in srgb, var(--wp--preset--color--danger, #b91c1c) 80%, var(--wp--preset--color--danger-light, #fee2e2));
	--f32-card-control-edge: color-mix(in srgb, var(--wp--preset--color--danger, #b91c1c) 80%, var(--wp--preset--color--danger-light, #fee2e2));
	opacity: 1;
}

/* ------------------------------------------------------ The passthrough slot -- */

/*
 * `.account-card__raw` — the one part of a card whose CONTENTS this stylesheet did not
 * write and cannot predict.
 *
 * WHAT ARRIVES IN IT. Whatever a third party's `do_action()` handler printed on
 * `edd_order_history_order_details` or `edd_order_history_row_end`, captured out of an
 * output buffer by a panel that is obliged to render it. Observed on this store: EDD's own
 * `<div class="edd-blocks-orders__order-downloads-link">`, EDD Pro Invoices'
 * `<div class="edd-invoices__order">`, and Software Licensing's `<edd-sl-deactivate>`
 * custom element. It may contain `<button>`, `<form>`, `<select>` or `<input
 * type="submit">`. It is DIV-WRAPPED, not bare anchors.
 *
 * WHY THERE IS A RULE HERE AT ALL. `AccountCard\action()`'s own comment says there is no
 * rule for this class and there should not be one. That was written when the slot was a
 * last resort; it is now the Orders panel's normal path for third-party output, emitted
 * alone or not at all in place of a foot full of harvested `link` descriptors. Unstyled,
 * an extension's invoice link renders as body text beside a 44px pill — which is the exact
 * QA finding the harvest was built to fix, arriving back through a different door. That
 * comment is the plugin's and needs the same correction; it is reported, not edited here.
 *
 * WHAT IS STYLED IS ELEMENTS, NEVER CLASSES. Naming `.edd-invoices__order` would be a
 * theme betting on a plugin's private class surviving its next release, and it would say
 * nothing at all about the extension nobody has installed yet. An `<a>` is an `<a>` in
 * every one of them.
 *
 * EVERY LINK ARRIVES IN A BLOCK-LEVEL DIV OF ITS OWN. Measured on order 299287:
 * `<div class="edd-blocks-orders__order-downloads-link"><a>` and
 * `<div class="edd-invoices__order"><a>`, two siblings, and Software Licensing adds a
 * third shape. So the anchors are never siblings of each other and no rule keyed to the
 * anchors alone can arrange them. This is the rule that arranges them, and it reaches the
 * WRAPPERS by being on the box.
 *
 * A COLUMN AND NOT A WRAPPING ROW, which is the one place this section trades density for
 * predictability on purpose. Two outline pills side by side would be tighter, and at 458px
 * they would fit — but `flex-flow: row wrap` applies to whatever the extension printed,
 * and a `<form>`, a `<table>` or a paragraph of licence terms placed in a row track is
 * markup squeezed into a shape it was never laid out for. The rest of `__foot` stacks its
 * controls, so a stacking slot is also the consistent answer.
 *
 * `__foot` is a flex column, so passed through bare every top-level element the extension
 * printed would become its own flex item and a `<form>` would be torn from the `<p>`
 * explaining it — which is why the plugin boxes it. The box then needs a rhythm of its
 * own, because sibling `<div>`s carry no margin and two links would touch: 9px, the same
 * gap `__foot` uses, so a control inside the slot and a control beside it are on one
 * rhythm. `align-items` is left at its `stretch` default DELIBERATELY: `flex-start` would
 * shrink a `<form>` or a table to its content and squash markup that was written against a
 * full-width flow context. The leaf controls take `align-self: flex-start` instead, which
 * is the same result for the things that should be content width and no effect at all on
 * the things that should not.
 *
 * THE PADDING IS THE CONTROL'S OWN AND NOT THE TEXT'S. What EDD prints is indented, so the
 * anchor's text node arrives wrapped in tabs and newlines. A control sized by its text box
 * would inherit that. Stating `padding: 0 16px` below makes it exact, and it measures
 * exact: "View Order Details" renders at 150.78px against 116.78px of text plus 32px of
 * padding plus 2px of border, so nothing of the indentation survived.
 *
 * `min-width: 0` because this is a flex item inside a grid track: an unbreakable licence
 * key printed by an extension would otherwise floor the track's minimum size and widen the
 * whole column, which is the hazard `__name` documents from the other direction.
 */
.account-card .account-card__body .account-card__foot .account-card__raw {
	display: flex;
	flex-direction: column;
	gap: 9px;
	width: 100%;
	min-width: 0;
}

/*
 * THE ELEMENT IS THE ONLY HONEST SIGNAL OF INTENT, so it is what decides the weight.
 *
 * account.css's hierarchy is solid = this CHANGES something, outline = this only MOVES
 * you, and the card cannot ask a third party which of the two its control is. HTML has
 * already answered: an `<a>` navigates and a `<button>` or a submit acts. That is not a
 * proxy invented here, it is what the two elements MEAN, and it is the same distinction
 * the observed markup obeys — View Invoice and View Licenses are anchors, Software
 * Licensing's site deactivation is a button.
 *
 * Anchors are all outlined and none is promoted, because when several arrive the card has
 * no way to know which the customer wants and a stylesheet guessing would fill the wrong
 * one. That is a deliberate loss on the order where the receipt link is inside the slot:
 * quiet and correct beats loud and wrong.
 *
 * 0,5,0, AND THE FOURTH STEP WAS MEASURED RATHER THAN CHOSEN. `:is()` scores as its
 * heaviest argument, which is the attribute selectors at one class each, so the ladder is
 * `.account-card` + `__body` + `__foot` + `__raw` + `:is(…)`. `__body` is in there for
 * one reason and this is the record of it: at 0,4,0 the rule was written without it, and
 * the extension's `<button>` rendered on staging as a 46px BLUE page-level submit, because
 * assets/css/forms.css writes
 *
 *     form:is(.edd_form, …) button:not([type="button"]):not([type="reset"]):not(.edd-button-secondary)
 *
 * which is 0,4,2 — four classes from the `:is()` and three `:not()`s, two elements from
 * `form` and `button`. A `:not()` scores as its argument; it is not free. One more class
 * settles it, and `__body` is always the parent of `__foot` in `AccountCard
ender()`.
 *
 * It has to clear three other things reaching the same markup: theme.json's link colour
 * (0,1,0) and its `:hover` underline (0,2,0); and `.f32-account__panel a.edd-submit` in
 * assets/css/account.css (0,2,1), because an extension is entitled to print
 * `class="edd-submit"` and a tie there would be a coin toss ACROSS stylesheets, which is
 * the one kind this codebase does not accept.
 *
 * The shape is the card's pill, character for character with `__download` above, so an
 * extension's link and a control this theme authored are the same object at the same 44px
 * target. Only the paint differs by element.
 */
.account-card .account-card__body .account-card__foot .account-card__raw :is(a, button, [type="submit"], [type="button"]) {
	display: inline-flex;
	align-self: flex-start;
	align-items: center;
	justify-content: center;
	gap: 7px;
	max-width: 100%;
	min-height: 44px;
	padding: 0 16px;
	border: 1px solid var(--wp--preset--color--muted, #6b7280);
	border-radius: var(--wp--custom--border-radius--full, 9999px);
	background: var(--wp--preset--color--contrast, #ffffff);
	color: var(--wp--preset--color--primary, #000000);
	font-family: inherit;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.45;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
}

/*
 * The acting half. 0,5,0 as well, and it ties with the rule above on purpose — same file,
 * printed after it, which is the tie this file's header says is fine. `<a>` is excluded by
 * being absent rather than by a `:not()`, so an anchor an extension gave `role="button"`
 * still reads as the navigation it is.
 */
.account-card .account-card__body .account-card__foot .account-card__raw :is(button, [type="submit"]) {
	border-color: transparent;
	background: var(--wp--preset--color--accent, #1473e6);
	color: var(--wp--preset--color--contrast, #ffffff);
}

/* 0,6,0 for both, over the theme's `a:hover` underline at 0,2,0 and over forms.css's own
   hover pair at 0,4,2. The outline half moves to the same `subtle` fill the tier section
   uses; the filled half steps `accent` to `action`, the same two colours in the same two
   states as `__download`, so the two hovers a customer meets on one card are one
   behaviour. */
.account-card .account-card__body .account-card__foot .account-card__raw :is(a, button, [type="submit"], [type="button"]):hover {
	border-color: var(--wp--preset--color--primary, #000000);
	background: var(--wp--preset--color--subtle, #f5f5f5);
	color: var(--wp--preset--color--primary, #000000);
	text-decoration: none;
}

.account-card .account-card__body .account-card__foot .account-card__raw :is(button, [type="submit"]):hover {
	border-color: transparent;
	background: var(--wp--preset--color--action, #1d4ed8);
	color: var(--wp--preset--color--contrast, #ffffff);
}

/*
 * A `<select>` is a tap target too and nothing else in this card can reach one. HEIGHT
 * ONLY, and no paint: a select inside an `.edd_form` is forms.css's, a select outside one
 * belongs to whoever printed it, and a theme repainting a third party's form control is
 * how a dropdown ends up with a border it needs and an arrow it lost. 0,4,1, above
 * forms.css's `form:is(…) select` at 0,1,2.
 */
.account-card .account-card__body .account-card__foot .account-card__raw select {
	min-height: 44px;
}

/* -------------------------------------------------------------------- Focus -- */

/*
 * One ring for every interactive part of the CARD, stated once. `focus-visible` rather
 * than `focus`, so a mouse click on a control does not leave a ring behind it.
 *
 * The block's own chrome — search, sort, chips, browse, support, pager, and the
 * empty-state clear link — keeps its half of this list in
 * assets/blocks/sparklestock-downloads-library.css. The two halves are the same
 * declaration and have to stay the same declaration: a card focused in the order
 * history and the same card focused in the library must not ring differently.
 */
.account-card .account-card__name a:focus-visible,
.account-card .account-card__download:focus-visible,
.account-card .account-card__quiet:focus-visible,
.account-card .account-card__foot summary:focus-visible,
.account-card .account-card__foot details a:focus-visible,
/* The passthrough slot's contents ring the same way. An extension may print a control
   this theme has never seen; it may not print one that focuses invisibly. */
.account-card .account-card__body .account-card__foot .account-card__raw :is(a, button, select, [type="submit"], [type="button"]):focus-visible {
	outline: 2px solid var(--wp--preset--color--accent, #1473e6);
	outline-offset: 2px;
}

/* --------------------------------------------------------------------- Rows -- */

/*
 * THE SAME CARD, TURNED SIDEWAYS. `--rows` on the LIST, never on the card: the `<li>`
 * carries exactly one class by contract (`AccountCard\render()` mints it and callers do
 * not add to it), and the arrangement of many cards has always belonged to the caller —
 * see note at the top of this file. Two callers ask for it today,
 * f32_account_render_orders() and f32_account_recent_downloads_panel(), and they ask by
 * naming the list.
 *
 * WHY ORDERS AND DOWNLOADS ARE ROWS AND THE LIBRARY IS A GRID. A grid is right when the
 * PICTURE is the subject and the customer is choosing — that is the downloads library,
 * and it keeps its grid. Orders and download history are TABULAR: a date, a total and a
 * status only compare when they line up, and in a card grid each order's total sits at
 * whatever height its own title happened to end at. The customer scanning for the one
 * they paid £89 for reads twenty cards instead of one column.
 *
 * NOTHING ABOUT THE CARD'S PARTS CHANGES. Same `__art`, `__body`, `__name`, `__meta`,
 * `__foot`, same badge vocabulary, same tones, same focus ring. Only the axis and the
 * artwork's box are restated, which is why every rule below is an override of a rule
 * already in this file rather than a new component.
 *
 * SPECIFICITY. The list class plus `.account-card` plus the part is 0,3,0, which clears
 * the 0,2,0 base rules outright in either source order. The base rules stay the floor: a
 * caller that does not ask for rows draws exactly what it drew before, and a browser
 * that has never heard of `@container` still gets the row layout, because the container
 * query below only adds the third column.
 */

/*
 * `height: auto` because the card no longer shares a row with anything. `height: 100%`
 * exists so a grid of three cards is as tall as its tallest; a full-width row has no
 * neighbour to match and the declaration would only stretch the last row of a grid
 * container that is not one.
 */
.f32-account-orders__list--rows > .account-card {
	display: grid;
	grid-template-columns: 88px minmax(0, 1fr);
	align-items: stretch;
	height: auto;
}

@media (min-width: 560px) {
	.f32-account-orders__list--rows > .account-card {
		grid-template-columns: 112px minmax(0, 1fr);
	}
}

/*
 * THE ARTWORK STOPS BEING A 16:9 BAND AND BECOMES THE ROW'S LEFT EDGE.
 *
 * `aspect-ratio: auto` and `height: 100%` rather than a second ratio: the row's height
 * is set by the text beside it — one line of title, one meta line, and a foot whose
 * height depends on how many controls EDD's extensions printed — so a ratio here would
 * either leave a gap under the picture or force the row taller than its own content. The
 * `min-height` is the floor for the shortest possible row, so a one-control order still
 * shows a thumbnail rather than a 30px sliver.
 *
 * `flex: 0 0 auto` and `min-height: 0` from the base rule are inert here: this is a grid
 * item now, and the automatic-minimum-size trap those two were written against is a flex
 * rule. They are left in place because the same element is still a flex item in every
 * grid-shaped list.
 */
.f32-account-orders__list--rows > .account-card > .account-card__art {
	aspect-ratio: auto;
	height: 100%;
	min-height: 72px;
}

/*
 * The body carries the row's whole inset. `align-content: center` so a short row's two
 * lines sit against the middle of the thumbnail rather than at the top of it.
 */
.f32-account-orders__list--rows > .account-card > .account-card__body {
	justify-content: center;
	gap: 6px;
}

/*
 * THE THIRD COLUMN, AND IT IS A CONTAINER QUERY FOR THE REASON assets/css/account.css
 * states at `.f32-account__panel`: this panel gets NARROWER as the viewport gets WIDER,
 * once, by 242px, when the nav becomes a rail at 900px. A viewport media query adding a
 * column would add it at exactly the width the room disappeared. `f32-account-panel` is
 * the account shell's own element and is always an ancestor of both lists.
 *
 * Above 640px of PANEL the controls leave the flow and sit at the row's right end, which
 * is what makes the status pills and the Download control line up down the list — the
 * whole point of rows. Below it they stay where the base rule put them, stacked under the
 * meta line, because a 320px row cannot hold a title and two pills side by side.
 *
 * `margin-block-start: 0` undoes the base rule's `auto`, which exists to push the foot to
 * the bottom of a column card and would here push it to the bottom of the row.
 */
@container f32-account-panel (min-width: 640px) {
	.f32-account-orders__list--rows > .account-card > .account-card__body {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		align-items: center;
		column-gap: 16px;
	}

	.f32-account-orders__list--rows > .account-card .account-card__foot {
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
		justify-content: flex-end;
		grid-row: 1 / -1;
		grid-column: 2;
		max-width: 20rem;
		margin-block-start: 0;
	}

	/*
	 * The download control sizes to its label in a row. `width: 100%` is right in a card,
	 * where the pill is the full width of a 299px column and the foot is a stack; in a
	 * row it would push the two controls of an order onto separate lines and undo the
	 * alignment this layout exists for.
	 */
	.f32-account-orders__list--rows > .account-card .account-card__foot .account-card__download {
		width: auto;
	}

	/*
	 * The passthrough slot in a row. EDD prints each of its links in a block-level div of
	 * its own — measured, and recorded at the `__raw` rule above — so the slot stays a
	 * column internally and merely stops being full-width. `align-items: flex-end` keeps
	 * View Invoice under View Order Details against the row's right edge rather than
	 * ragged against the middle of it.
	 */
	.f32-account-orders__list--rows > .account-card .account-card__foot .account-card__raw {
		align-items: flex-end;
		width: auto;
	}
}

/* ------------------------------------------------------------------- Ledger -- */

/*
 * THE ORDER HISTORY'S OWN ARRANGEMENT — f32/.mockups/order-cards-redo.html, Option 1.
 *
 * WHY THERE IS A SECOND MODIFIER AND NOT AN EDIT TO `--rows`. Two panels wear `--rows`:
 * the order history and the recent-downloads list in f32_account_recent_downloads_panel().
 * They are the same shape only down to "thumbnail, text, controls". An order card also has
 * an ITEM LIST, and everything below is about where that list goes; a download row has no
 * such list and must not inherit a three-column grid built to make room for one. So
 * `--rows` is left exactly as it was and `--ledger` is added beside it.
 *
 * BOTH CLASSES ARE ON THE LIST AND `--rows` IS NOT OPTIONAL. assets/css/account.css
 * withholds the two-column card grid with
 * `.f32-account__panel .f32-account-orders__list:not(.f32-account-orders__list--rows)` at
 * 0,2,0. A ledger list that dropped `--rows` would take two columns at a 560px panel and
 * un-line every total in the history — and the repair would have to tie with another
 * stylesheet at 0,2,0, which this file's header forbids.
 *
 * EVERY RULE BELOW IS WRITTEN ON THE COMPOUND `--rows.--ledger`. That is one class more
 * than the Rows rules it replaces, so each replacement is won on SCORE. Ties inside one
 * file are blessed by the header, but these are not stylistic overrides: a Rows rule
 * winning here would put an 88px band and a `display: grid` body back into a layout that
 * has neither, and the failure would look like a half-drawn card rather than like a
 * cascade problem.
 *
 * THE THREE DEFECTS THIS SECTION EXISTS TO FIX, all verified on staging:
 *
 *   1. THE COLLAGE. The artwork slot drew `f32_account_pass_band()`'s 2x2 mosaic for any
 *      order containing a pass. Fixed in the caller — f32_account_orders_thumb() now
 *      returns ONE image and never a grid — and the slot here is sized 56x38 so there is
 *      nowhere for a second image to go.
 *
 *   2. THE REFLOW. The items disclosure was a control in `__foot`, and `__foot` was a grid
 *      item in the middle of the row, so opening it grew a grid track, re-wrapped the
 *      title beside it and pushed the controls down into the dead space it opened. THE FIX
 *      IS STRUCTURAL AND NOT A TUNING: the disclosure is now a full-width area on a row of
 *      its own, BELOW every other area. `grid-template-areas` is what makes that a
 *      guarantee rather than a hope — an item placed in `items` cannot occupy a track that
 *      `name`, `meta` or `acts` occupy, at any content length, so opening it can only make
 *      the card taller. There is no width it can take from anything.
 *
 *   3. THE TWO EQUAL PILLS. "View Order Details" and "View Invoice" arrived from the
 *      passthrough slot as two identical outlines, stacked, giving paperwork the same rank
 *      as the routine action. The first is now a ghost pill and the rest are quiet links.
 *
 * WHY PROMOTING THE FIRST ANCHOR IS ALLOWED HERE, since the passthrough section above says
 * in capitals DO NOT PROMOTE ONE. That instruction rests on a stated premise — "when
 * several arrive the card has no way to know which the customer wants" — and on this panel
 * the premise is false, for a reason recorded at the top of inc/account-cards-orders.php:
 * `\EDD\Blocks\Orders\Functions\get_details()` PRINTS THE ROUTE TO THE ORDER ITSELF and
 * only then fires `edd_order_history_order_details`, which is where Invoices and Software
 * Licensing hang theirs. First in the buffer is therefore not a guess about intent, it is
 * EDD's own output ahead of its own hook. The promotion is scoped to `> :first-child` and
 * to `<a>` inside it: an extension's `<button>` keeps the filled treatment the passthrough
 * section gives it, because a button ACTS and its rank is not this rule's to lower.
 *
 * SUBSTITUTIONS RECORDED. The mockup's 6px thumbnail radius has no token between
 * `border-radius--sm` (4px) and `--md` (8px); `sm` is taken, which is also the card's own
 * corner, so the picture and the box it sits in read as one object. The mockup's 24px card
 * inset is not taken: the inset is `surface.object.pad` and the header of this file records
 * why an object's inset belongs to the page rather than to the component.
 *
 * THE TWO CUSTOM PROPERTIES BELOW NO LONGER COPY THAT TOKEN, THEY NAME IT. They were written
 * when `surface.object.pad` was a `14px 14px 16px` shorthand, and they existed because a
 * `calc()` cannot reach into a shorthand — so the halves had to be restated as numbers, with
 * a comment as the only thing holding them in step. The token is one value now. What is left
 * for the properties to do is the half of the job that was never about shorthands: a row that
 * bleeds writes `calc(-1 * <name>)` and a row that pays back writes `<name>`, and the two are
 * only guaranteed to cancel if they can spell the same name.
 */

.f32-account-orders__list--rows.f32-account-orders__list--ledger > .account-card {
	/*
	 * `surface.object.pad`, NAMED TWICE SO THE ROWS THAT BLEED CAN NEGATE IT. Both halves
	 * resolve to the same token today. They are two names and not one because the two axes
	 * are reclaimed by different children — the item lists take the block-end, the full-bleed
	 * disclosure and the file list take the inline — and a child that bleeds on one axis must
	 * not have to name the other to do it.
	 *
	 * THE TOKEN AND NOT THE LADDER STEP, WHICH IS WHAT THESE TWO USED TO READ. They were
	 * `var(--wp--preset--spacing--40)`: the same 1rem, reached by the wrong route. The base
	 * card at the top of this file takes `surface.object.pad`; this row took the preset that
	 * the token happens to point at today. Move `surface.object.pad` to `spacing--50` and the
	 * card follows while the ledger row stays at 1rem — two insets on one page, disagreeing,
	 * with nothing in either file to say why.
	 *
	 * THE DIVISION IS THEME.JSON'S OWN. A `spacingSizes` preset is a rung on the page's
	 * spacing ladder and WordPress puts it in the editor's padding and gap controls, so it is
	 * a value a site editor may move. The distance from an object's edge to its first word is
	 * not that: it is a decision this theme makes once, for every surface at the same time,
	 * and `settings.custom` is where a decision like that is kept. A preset step may still be
	 * the ANSWER — `surface.object.pad` points at one — but the component asks the token.
	 */
	--f32-ledger-inset-inline: var(--wp--custom--surface--object--pad, 1rem);
	--f32-ledger-inset-block-end: var(--wp--custom--surface--object--pad, 1rem);

	display: grid;
	grid-template-columns: 56px minmax(0, 1fr);
	/*
	 * FOUR AREAS AND THE LAST TWO ARE FULL WIDTH. `acts` drops below the meta line at this
	 * width because a 320px row cannot hold a title and a pill side by side — the same
	 * judgement, at the same breakpoint, the Rows section made before it. `items` is below
	 * `acts` in both templates and is the only area that is full width in both.
	 */
	grid-template-areas:
		"art   name"
		"art   meta"
		"acts  acts"
		"items items";
	align-items: center;
	/*
	 * COLUMN GAP ONLY, AND THE VERTICAL SPACING IS CARRIED BY THE ITEMS. A `row-gap` is
	 * paid by the grid whether or not a row has anything in it, and two of these four rows
	 * are conditional: a single-item order emits no `<details>` at all, so `items` stayed
	 * an empty track that still charged a gap — a 4px shelf between the last control and
	 * the card's bottom padding, on every order with one product in it. Spacing that lives
	 * on the placed element costs nothing when the element is absent, so the three gaps are
	 * declared as `margin-block-start` on `.account-card__meta` (4px), on the `acts`
	 * controls (12px = the old 8px plus the gap) and on the `<details>` (14px = the old
	 * 10px plus the gap). No `:has()` is needed for that.
	 */
	column-gap: 16px;
	height: auto;
	/* The block-start half needs no name: nothing negates the top of this row. */
	padding: var(--wp--custom--surface--object--pad, 1rem) var(--f32-ledger-inset-inline) var(--f32-ledger-inset-block-end);
}

/*
 * THE ROW GIVES ITS EDGE UP TO THE LIST, and this is one half of a swap whose other half
 * is in assets/css/account.css. Read that one too before changing either: the list takes
 * `surface.object`'s line, radius and fill there, and neither rule is correct alone.
 * Without this the list draws a box around a column of boxes; without that one these rows
 * lose their box and float on the page grey.
 *
 * WHY THE SWAP. A card's edge says "this is one object among others". That is true of a
 * grid of three in the downloads library and it is false of a ledger, where the rows are
 * the same kind of thing many times over and what the reader needs is for them to LINE
 * UP. Measured on staging before this rule: seven deliveries cost 958px of panel at a
 * 1180px viewport and 1447px on a phone, of which 120px was gutter between boxes and 28
 * painted borders were spent saying seven times what the list now says once.
 *
 * `border: 0` AND NOT `border-color: transparent`. The base rule sizes the card with
 * `box-sizing: border-box`, so a transparent 1px edge would keep costing 2px of height
 * and 2px of width per row — and the hairline below would then sit 1px inside the row
 * rather than on the seam between two.
 *
 * `overflow: hidden` IS KEPT AND IS STILL DOING WORK. It is inherited from the base rule
 * and clips this card's own full-bleed item disclosure. What it no longer has to do is
 * clip that disclosure to a corner radius — the radius is the list's now, and so is the
 * `overflow: hidden` that answers it.
 *
 * 0,3,0 over the base card rule's 0,1,0.
 */
.f32-account-orders__list--rows.f32-account-orders__list--ledger > .account-card {
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
}

/*
 * ONE HAIRLINE PER SEAM, WHICH IS THE OTHER THING N BOXES WERE PAYING FOR TWICE. Two
 * adjacent bordered cards draw two lines with a gutter between them; a list of rows wants
 * one line and no gutter. `+` rather than a `border-block-end` on every row so the last
 * row does not draw a line immediately inside the list's own bottom edge.
 *
 * `border-subtle` and not the `surface.object` line token: this is a divider INSIDE an
 * object, not the edge OF one, and the two are only the same colour today by coincidence.
 * The receipt's manifest rows in assets/css/order-receipt.css separate themselves the
 * same way and with the same token.
 *
 * 0,4,0.
 */
.f32-account-orders__list--rows.f32-account-orders__list--ledger > .account-card + .account-card {
	border-block-start: 1px solid var(--wp--preset--color--border-subtle, #e0e0e0);
}

/*
 * THE BODY AND THE FOOT BECOME NOTHING, so that their children are the card's own grid
 * items. `AccountCard\render()` nests the title, the meta line and the controls inside
 * `__body`, and the controls again inside `__foot`; the contract is fixed and this theme
 * may not change it. `display: contents` is what lets a fixed three-level DOM be laid out
 * as one flat grid — and it is what makes defect 2 unreachable, because the disclosure can
 * only be given an area of its own if it is an item of the grid that has the areas.
 *
 * BOTH ARE `<div>`s WITH NO ROLE, which is the condition under which `display: contents` is
 * safe: it removes the box, not the children, and a generic container has no semantics to
 * lose. It would not be safe on the `<li>`, on the `<p>` or on a table part, and none of
 * those is being asked.
 *
 * The insets, the flex direction, the gaps and `margin-block-start: auto` that the base
 * rules put on these two boxes all stop applying with the box. That is intended — the card
 * carries the inset now.
 */
.f32-account-orders__list--rows.f32-account-orders__list--ledger > .account-card > .account-card__body,
.f32-account-orders__list--rows.f32-account-orders__list--ledger > .account-card .account-card__foot {
	display: contents;
}

/*
 * THE THUMBNAIL IS ONE PICTURE IN A FIXED BOX. 56x38 is the mockup's, near enough 3:2, and
 * it is stated in both axes rather than as a ratio because the row's height is set by the
 * text beside it and a ratio would make the picture argue with the text about it.
 *
 * `aspect-ratio: auto` and `min-height: 0` cancel the base band, whose 16:9 and whose
 * `width: 100%` are for a card-top band; the Rows section's `height: 100%` and
 * `min-height: 72px` are cancelled with them. The base rule's `subtle` fill and inset
 * hairline are KEPT — they are what an order with no picture at all draws, and at 56x38
 * that is a small grey tile rather than a hole.
 *
 * `align-self: center` against an area that spans the title and meta rows, so the tile is
 * centred on the pair however long the title wraps.
 */
.f32-account-orders__list--rows.f32-account-orders__list--ledger > .account-card > .account-card__art {
	grid-area: art;
	align-self: center;
	width: 56px;
	height: 38px;
	min-height: 0;
	aspect-ratio: auto;
	border-radius: var(--wp--custom--border-radius--sm, 4px);
}

/*
 * THE TITLE AND THE FACTS ARE TWO ROWS THAT BEHAVE AS ONE BLOCK, and the two `align-self`
 * values are what make that true when something else on the row is taller than they are.
 *
 * `acts` spans both text rows, so a 44px pill beside a single line of title distributes its
 * spare height across BOTH of those rows. With the card's `align-items: center` each of
 * them would then centre its own line inside its own grown track and the title would drift
 * away from the meta under it. `end` on the title and `start` on the meta pins them to the
 * seam between the two tracks, so the pair stays together and the pair stays centred —
 * because the two tracks grow by the same amount.
 *
 * 14px/600 from the mockup, down from the card's 15px/700: this is a row in a ledger of
 * twenty, not the headline of a card in a grid of three.
 */
.f32-account-orders__list--rows.f32-account-orders__list--ledger > .account-card .account-card__name {
	grid-area: name;
	align-self: end;
	font-size: 14px;
	font-weight: 600;
}

.f32-account-orders__list--rows.f32-account-orders__list--ledger > .account-card .account-card__meta {
	grid-area: meta;
	align-self: start;
	margin-block-start: 4px;
	font-size: 13px;
}

/*
 * EVERY CONTROL THE FOOT CAN HOLD LANDS IN `acts`, NAMED ONE BY ONE. `AccountCard\action()`
 * emits exactly four shapes and three of them are controls: `__raw` for a passthrough,
 * `__download` for a `link`, `__unavailable` for a `note`. The fourth is the `<details>`
 * below, and it is the only one that goes anywhere else.
 *
 * NAMED RATHER THAN LEFT TO AUTO-PLACEMENT, which is the whole guarantee of this section.
 * `grid-template-areas` creates the four areas, but an item with no `grid-area` is placed
 * by the auto-placement algorithm into whatever slot it finds first — which for a card
 * whose disclosure was somehow un-placed would be a track in the middle of the summary,
 * and defect 2 would be back with no rule visibly wrong. Both sides of the split are
 * spelled out so that a control this file has not met draws in the wrong place LOUDLY.
 *
 * `__unavailable` is not emitted by the orders panel today. It is listed because the
 * alternative is a card that silently reflows the day one is.
 *
 * `max-width: 20rem` IS THE ROWS SECTION'S CAP, RESTATED HERE BECAUSE THE BOX IT LIVED ON
 * IS GONE. The Rows template puts that cap on `.account-card__foot`; `display: contents`
 * above discards the foot's box and every declaration on it, the cap included. Without it
 * a control-heavy `__raw` — a flex row that wraps — contributes its max-content width to
 * the `auto` acts column in the wide template, and the name column is `minmax(0, 1fr)`, so
 * the title is squeezed towards zero rather than the controls wrapping. The cap is put
 * back on the items themselves, which is where it can be put now.
 */
.f32-account-orders__list--rows.f32-account-orders__list--ledger > .account-card .account-card__foot > .account-card__raw,
.f32-account-orders__list--rows.f32-account-orders__list--ledger > .account-card .account-card__foot > .account-card__download,
.f32-account-orders__list--rows.f32-account-orders__list--ledger > .account-card .account-card__foot > .account-card__unavailable {
	grid-area: acts;
	align-self: center;
	justify-self: start;
	max-width: 20rem;
	margin-block-start: 12px;
}

/*
 * The passthrough slot, in a ledger row. A ROW AND NOT THE COLUMN the passthrough section
 * chose, and that section's own reason for the column is respected rather than overruled:
 * it is `flex-flow: row wrap`, so a `<form>` or a table an extension prints still gets a
 * full line to itself the moment it does not fit beside its neighbour. What it stops doing
 * is stacking two 44px pills for two links that are eighteen and twelve characters long.
 *
 * `width: auto` so the slot is its content and the `auto` column can be its width.
 */
.f32-account-orders__list--rows.f32-account-orders__list--ledger > .account-card .account-card__body .account-card__foot .account-card__raw {
	flex-flow: row wrap;
	align-items: center;
	gap: 8px;
	width: auto;
}

/*
 * THE ONE FILLED BUTTON. `> :first-child` is the div EDD's own `get_details()` printed
 * before it fired the hook every extension hangs off — see the promotion note at the top of
 * this section for why that is a fact rather than a guess — and `a` restricts it to
 * navigation.
 *
 * 0,7,0 plus the element, over the passthrough section's own anchor rule at 0,5,0.
 *
 * IT WAS A GHOST PILL AND IT IS THE RECEIPT'S ROW BUTTON NOW, declaration for declaration:
 * `action` fill, `contrast` ink, an `--md` corner over the passthrough tier's pill, and
 * `brightness(0.92)` on hover. `.f32-drow__btn` in assets/css/order-receipt.css is the
 * twin, and the pairing is the point — every row on the confirmation ends in one filled
 * blue control, and an order row is the same shape of object making the same offer. A
 * ghost beside a quiet link left the row with two quiet halves and no answer to "where do
 * I click".
 *
 * THE RING GOES TRANSPARENT RATHER THAN BEING DROPPED. The passthrough tier gives every
 * control a 1px border and the box is sized with it; setting `border: 0` here would shrink
 * this one control by 2px against its neighbours in the same slot.
 *
 * CONTRAST IS NOT AT ISSUE ANY MORE. The old ghost rested its whole identification on
 * #1473e6 ink at 4.54:1, because a `border-subtle` ring is 1.5:1 and this file had already
 * ruled that too little for a boundary that must be SEEN. A filled control has no such
 * problem: white on `action` carries the label and the fill carries the boundary.
 */
.f32-account-orders__list--rows.f32-account-orders__list--ledger > .account-card .account-card__body .account-card__foot .account-card__raw > :first-child a {
	align-self: center;
	border-color: transparent;
	border-radius: var(--wp--custom--border-radius--md, 8px);
	background: var(--wp--preset--color--action, #1d4ed8);
	color: var(--wp--preset--color--contrast, #ffffff);
}

/* 0,8,0 plus the element, over the passthrough hover at 0,5,0. The fill does NOT change
   colour — the receipt's button darkens itself with a filter instead, so one hover reads
   the same on both pages and neither has to name a second blue that the palette does not
   have. No transition, so there is nothing here for a reduced-motion block to turn off. */
.f32-account-orders__list--rows.f32-account-orders__list--ledger > .account-card .account-card__body .account-card__foot .account-card__raw > :first-child a:hover {
	border-color: transparent;
	background: var(--wp--preset--color--action, #1d4ed8);
	color: var(--wp--preset--color--contrast, #ffffff);
	text-decoration: none;
	filter: brightness(0.92);
}

/*
 * EVERYTHING AFTER THE FIRST IS A QUIET LINK — the invoice, and whatever a future extension
 * adds after it. The vocabulary is `.f32-receipt-exits__link` in
 * assets/css/order-receipt.css, declaration for declaration: 13px/600 `accent`, no
 * underline at rest, `action` and an underline on hover. The receipt's foot and the order
 * card's foot are the two places a customer meets "the main way out, and a quieter one
 * beside it", and they now say it the same way.
 *
 * THE 44px TARGET IS KEPT even though the paint is a link's. It is inherited from the
 * passthrough rule and only the paint is overridden here — a quiet control is quiet in
 * WEIGHT, never in target, which is the rule the disclosure children below are held to as
 * well. `padding: 0 8px` narrows the box to something that reads as a link beside a pill
 * without taking the height away.
 *
 * `a` only: a `<button>` an extension prints after the first div keeps the filled acting
 * treatment the passthrough section gives it.
 */
.f32-account-orders__list--rows.f32-account-orders__list--ledger > .account-card .account-card__body .account-card__foot .account-card__raw > :not(:first-child) a {
	align-self: center;
	padding: 0 8px;
	border-color: transparent;
	background: transparent;
	color: var(--wp--preset--color--accent, #1473e6);
	text-decoration: none;
}

.f32-account-orders__list--rows.f32-account-orders__list--ledger > .account-card .account-card__body .account-card__foot .account-card__raw > :not(:first-child) a:hover {
	border-color: transparent;
	background: transparent;
	color: var(--wp--preset--color--action, #1d4ed8);
	text-decoration: underline;
	text-decoration-thickness: 2px;
}

/* ------------------------------------------------ Ledger: the items section -- */

/*
 * THE ITEM LIST IS A SECTION OF THE CARD, NOT A CONTROL IN ITS FOOT.
 *
 * FULL BLEED, by negating the card's own horizontal inset. That is what makes the rule
 * above it a divider across the whole card rather than a line floating between two
 * margins, and the card's `overflow: hidden` clips the ends of it to the corner radius.
 * The `-block-end` negation lets the last item row finish on the card's bottom edge, so an
 * opened list ends at the boundary instead of leaving a 16px shelf under it.
 *
 * `width: auto` cancels the base `width: 100%`, which with negative inline margins would
 * make the section 28px wider than the card rather than 28px wider than its content box.
 */
.f32-account-orders__list--rows.f32-account-orders__list--ledger > .account-card .account-card__foot > details {
	grid-area: items;
	width: auto;
	margin: 14px calc(-1 * var(--f32-ledger-inset-inline)) calc(-1 * var(--f32-ledger-inset-block-end));
	border-block-start: 1px solid var(--wp--preset--color--border-subtle, #e0e0e0);
}

/*
 * THE SUMMARY IS THE SECTION'S HEADER. 0,4,2, over the informational tone's own summary
 * rule at 0,3,2 — which is where `width: auto` and the centred pill geometry come from,
 * and both have to go: a header is left-aligned and spans its section.
 *
 * `accent` INK, declared rather than routed through `--f32-card-control-ink`. A declared
 * value beats an inherited one at any score, which is the mechanism that variable exists
 * for; setting the variable instead would work too and would hide the colour one level
 * away from the rule that means it. It is 4.54:1 on white, and it is the same blue as the
 * ghost pill above, which is the point — one accent for "this is the way in", whether the
 * way in is a page or a disclosure.
 *
 * The 44px target, the flex centring and the `::after` triangle all survive from the base
 * and informational rules untouched. `border-radius: 0` because a full-width bar with a
 * 9999px radius draws two visible arcs against the divider above it.
 */
.f32-account-orders__list--rows.f32-account-orders__list--ledger > .account-card .account-card__foot > details > summary {
	justify-content: flex-start;
	width: 100%;
	padding: 0 var(--f32-ledger-inset-inline);
	border-radius: 0;
	color: var(--wp--preset--color--accent, #1473e6);
	font-weight: 600;
}

/*
 * The base rule puts 8px under an open summary to separate a pill from what it revealed.
 * There is no pill here and the first item row brings its own divider, so the gap would be
 * a seam in the middle of a list. 0,5,2, over 0,2,1.
 */
.f32-account-orders__list--rows.f32-account-orders__list--ledger > .account-card .account-card__foot > details[open] > summary {
	margin-block-end: 0;
}

/*
 * A DEFECT IN THE RULE ABOVE, FOUND BY MEASUREMENT AND FIXED HERE RATHER THAN THERE.
 *
 * The base disclosure hover — `.account-card .account-card__foot summary:hover` at 0,2,1
 * — sets `--f32-card-control-fill: action`, because in the base card a summary IS a
 * filled pill and darkening its fill is the right answer. This section then declares
 * `color: accent` on the same element at 0,5,2, for the good reason stated above it: the
 * ledger's summary is a section header, not a pill.
 *
 * Put together, hovering the items disclosure paints #1473e6 text on a #1d4ed8 fill.
 * That is 1.6:1, against the 4.5:1 this file holds every other label to, and it happens
 * on the commonest control on an order card. Nothing was wrong in either rule; they had
 * simply never been asked what they do at the same time.
 *
 * THE FILL IS WHAT GOES, not the ink. A full-bleed bar that fills on hover is a 44px
 * block of colour opening inside a row, which is louder than the thing it reveals; the
 * ledger already has a vocabulary for a quiet control answering the pointer, three rules
 * up at `__raw > :not(:first-child) a:hover` — `action` ink and a 2px underline — and
 * this takes it declaration for declaration so the two quiet controls on one row cannot
 * answer the pointer two different ways.
 *
 * `:focus-visible` is included because the base rule includes it and the same collision
 * would otherwise survive for anyone arriving by keyboard.
 *
 * 0,6,2, over the base hover's 0,2,1 and this section's own summary rule at 0,5,2.
 */
.f32-account-orders__list--rows.f32-account-orders__list--ledger > .account-card .account-card__foot > details > summary:hover,
.f32-account-orders__list--rows.f32-account-orders__list--ledger > .account-card .account-card__foot > details > summary:focus-visible {
	--f32-card-control-fill: transparent;
	color: var(--wp--preset--color--action, #1d4ed8);
	text-decoration: underline;
	text-decoration-thickness: 2px;
}

/*
 * ONE ITEM PER ROW, and the row is the link. `AccountCard\action()` emits a disclosure's
 * children as bare unclassed `<a>`s — that is the contract, restated at the base
 * disclosure rule, and it is why these are reached by element.
 *
 * THE 44px TARGET AND THE UNDERLINE ARE THE BASE RULE'S AND ARE KEPT DELIBERATELY. The
 * mockup draws these names unmarked, and the base rule's own comment is the argument
 * against that: these are standalone links in a list, not words inside a sentence, so WCAG
 * 2.5.8 gives them no Inline exemption and theme.json switches the underline off at rest
 * for everyone not holding a mouse. What changes is the INK — `primary` rather than
 * `muted`, because a full-width row with a divider above it is no longer at risk of
 * reading as a block of four black lines, which was `muted`'s whole reason — and the ROW
 * CHROME: the inset that lines the names up under the summary above them, and a hairline
 * that separates one product from the next.
 *
 * `margin-block-start: 0` replaces the base rule's 4px: the dividers do that job now, and
 * 4px of margin would break each hairline away from the row under it.
 *
 * 0,5,1 plus the element, over the base disclosure link rule at 0,2,1.
 */
.f32-account-orders__list--rows.f32-account-orders__list--ledger > .account-card .account-card__foot > details a {
	margin-block-start: 0;
	padding: 0 var(--f32-ledger-inset-inline);
	border-block-start: 1px solid var(--wp--preset--color--border-subtle, #e0e0e0);
	color: var(--wp--preset--color--primary, #000000);
	font-size: 13px;
}

/*
 * THE RING GOES INSIDE IN THIS SECTION, AND ONLY IN THIS SECTION. The Focus section draws
 * one ring for the whole card at `outline-offset: 2px` — 2px OUTSIDE the box. That is
 * right everywhere the box has room beside it, and wrong here: the disclosure above is
 * full bleed, so its summary and its item rows END on the card's edge, and `.account-card`
 * is `overflow: hidden` (it has to be — the full-bleed dividers are clipped to the corner
 * radius by it). An outside ring on a flush box is therefore drawn in the clipped region
 * and the left and right sides of it simply disappear, which leaves a keyboard user with
 * two horizontal lines and no box.
 *
 * `-2px` puts the same ring inside the same box: same colour, same 2px width, same
 * contrast, nothing clipped. The offset is the only declaration overridden — the ring
 * itself is still the card's one ring, stated once in the Focus section.
 *
 * 0,6,2 and 0,6,1 plus the element, over the Focus section's 0,3,2 and 0,3,2.
 */
.f32-account-orders__list--rows.f32-account-orders__list--ledger > .account-card .account-card__foot > details > summary:focus-visible,
.f32-account-orders__list--rows.f32-account-orders__list--ledger > .account-card .account-card__foot > details a:focus-visible {
	outline-offset: -2px;
}

/* --------------------------------------------------- Ledger: the wide panel -- */

/*
 * THE THIRD COLUMN, and it is a container query for the reason the Rows section states:
 * this panel gets NARROWER as the viewport gets WIDER, once, by 242px, when the nav becomes
 * a rail at 900px. 640px of PANEL is the same threshold the Rows section uses, kept
 * deliberately so that the order history and the download history beside it change shape at
 * the same moment.
 *
 * Above it the controls leave the flow and sit at the row's right end, which is what makes
 * the status pills and the ghost pills line up down the list. `items` stays full width and
 * stays last — it is the one area whose placement does not depend on the width, because the
 * guarantee in defect 2 does not depend on the width either.
 */
@container f32-account-panel (min-width: 640px) {
	.f32-account-orders__list--rows.f32-account-orders__list--ledger > .account-card {
		grid-template-columns: 56px minmax(0, 1fr) auto;
		grid-template-areas:
			"art   name  acts"
			"art   meta  acts"
			"items items items";
	}

	.f32-account-orders__list--rows.f32-account-orders__list--ledger > .account-card .account-card__foot > .account-card__raw,
	.f32-account-orders__list--rows.f32-account-orders__list--ledger > .account-card .account-card__foot > .account-card__download,
	.f32-account-orders__list--rows.f32-account-orders__list--ledger > .account-card .account-card__foot > .account-card__unavailable {
		justify-self: end;
		margin-block-start: 0;
	}

	/* The slot is right-aligned inside its own box as well, so a wrapped second line of
	   controls hangs from the row's right edge rather than from the middle of it. */
	.f32-account-orders__list--rows.f32-account-orders__list--ledger > .account-card .account-card__body .account-card__foot .account-card__raw {
		justify-content: flex-end;
	}
}

/* ============================================================================
 * HISTORY — the download history's row
 * ========================================================================= */

/*
 * WHAT THIS SECTION CLAIMS, IN ONE SENTENCE: this list is the ledger's row carrying a
 * file list, and nothing else about it is special.
 *
 * IT USED TO CLAIM MORE, AND THE CLAIM WAS WRONG. The section said "every row makes the
 * IDENTICAL offer about a different file, so the row IS the offer", and it drew that
 * conclusion in CSS: `::after { inset: 0 }` over the download control, so the whole 936px
 * row downloaded the file; the pill quieted to accent-on-nothing, because a lit pill would
 * have contradicted the row; the hover fill and the focus ring moved up to the row.
 *
 * WHAT WAS WRONG WITH IT. The row's largest region by far is the product name, and a
 * customer who clicks a product name expects the product — not 400MB arriving in their
 * downloads folder. An operation that cannot be undone must be asked for by aiming at the
 * thing that performs it, and a target that covers the title makes the title lie about
 * where it goes. The row now has two destinations and says which is which: the TITLE and
 * its artwork go to the product page (inc/account-recent-downloads.php passes `url` for
 * this), and the CONTROL downloads. That is the same division the ledger's order rows have
 * always had, which is why the three-class compound below now only carries what the file
 * list needs.
 *
 * WHAT WENT WITH IT: the stretch, the three control-paint variables, the row's hover fill,
 * the row's focus ring and the pill's suppressed one. The pill is a control again and gets
 * the base card's paint and the base card's focus ring, which is what makes it visibly the
 * thing that downloads.
 *
 * EVERY RULE BELOW IS WRITTEN ON THE THREE-CLASS COMPOUND, one class more than the Ledger
 * rules it refines, for the reason that section states: a replacement won on score rather
 * than on source order, so a Ledger rule surfacing here would be a cascade bug and not a
 * silently half-drawn row.
 */

/*
 * The control sits at its own width. The base rule gives `__download` `width: 100%` so
 * that the thing the customer came for does not shrink to its label inside a 299px card;
 * in a row it is one of two things on the line and a full-width pill would push the date
 * off it. 0,5,0 over the base rule's 0,2,0.
 */
.f32-account-orders__list--rows.f32-account-orders__list--ledger.f32-account-orders__list--history > .account-card .account-card__foot > .account-card__download {
	width: auto;
}

/*
 * The date is the only thing left on the meta line once the provenance moves to the
 * caption, so the line is a fact rather than a row of pills and is set as one. `muted` is
 * already the `__when` ink from the base; what changes is that nothing sits beside it any
 * more, so the tabular figures are worth having — twenty dates in a column line up on the
 * comma. 0,5,0 over the Ledger meta rule's 0,3,0.
 */
.f32-account-orders__list--rows.f32-account-orders__list--ledger.f32-account-orders__list--history > .account-card .account-card__body .account-card__meta {
	font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------- History: the files list -- */

/*
 * A DELIVERY OF SEVERAL FILES SHOWS THEM. No summary, no click to find out, no control that
 * moves when you use it.
 *
 * WHAT THIS REPLACES AND WHY IT WAS WRONG. The files were a `<details>` — the card
 * contract's answer for "several" — and this section spent three rules putting the closed
 * summary in the `acts` slot so that it matched the six single-file rows around it. It did
 * match, closed. Opened, the `<details>` moved to the full-bleed `items` area and took the
 * control with it: the thing the customer had just clicked jumped from the row's right edge
 * to a bar on a line of its own, and the row was left with no control while every other row
 * still had one. A control that relocates when you use it is a worse defect than the
 * inconsistency the swap was written to fix.
 *
 * So the disclosure is gone. `SparkleStockBlocks\AccountCard` grew a fourth action kind for
 * this — `list` — and inc/account-recent-downloads.php passes it; the Orders panel keeps
 * `disclosure`, because there the item list genuinely is a detail about the row rather than
 * the reason the row exists. That division is stated in full at ACTION_KINDS in the plugin.
 *
 * THE ROWS ARE THE PARENT ROW, ONE LEVEL IN. Same 44px, same name-left/action-right, same
 * whole-row target, same quiet accent, same `subtle` under the pointer. What they do not
 * have is artwork, which is what `grid-column: 2` is for: the list starts where the TITLE
 * starts rather than where the card does, so a file name sits directly under the product
 * name it belongs to and the two read as one column. Full bleed would have been the Ledger's
 * habit and would have put the file names under the thumbnail instead.
 *
 * 0,7,0. `grid-column` rather than `grid-area: items`, because `items` spans the artwork
 * column in both of the Ledger's templates and this list must not.
 */
.f32-account-orders__list--rows.f32-account-orders__list--ledger.f32-account-orders__list--history > .account-card .account-card__body .account-card__foot > .account-card__files {
	grid-column: 2 / -1;
	grid-row: auto;
	display: flex;
	flex-direction: column;
	width: auto;
	max-width: none;
	/*
	 * THE CARD'S BOTTOM INSET IS NEGATED, AND THIS FILE HAS ALREADY MADE THE ARGUMENT.
	 * The Ledger's item disclosure does the identical thing thirty rules up, in the identical
	 * words: the negation "lets the last item row finish on the card's bottom edge, so an
	 * opened list ends at the boundary instead of leaving a 16px shelf under it".
	 *
	 * WHAT THE SHELF IS, measured here before the fix. Every file row is `min-height: 44px`
	 * around ~19px of text, so it carries ~12.5px of its own breathing room above and below.
	 * Under the LAST row that 12.5px was landing on top of the card's 16px `-block-end`
	 * inset: 31px from the last baseline to the card's edge, against 29px between two rows,
	 * with no hairline closing it — so the space read as a void rather than as rhythm, which
	 * is exactly what it looks like and why it was reported.
	 *
	 * WHY THE CHILD NEGATES RATHER THAN THE CARD DROPPING ITS PADDING. The obvious
	 * alternative is `.account-card:has(.account-card__files) { padding-block-end: 0 }` — a
	 * container reshaping itself by inspecting what is inside it, which is a rule that has to
	 * be revisited every time the card gains a child. The Ledger states the principle at its
	 * `column-gap` note: spacing that lives on the placed element costs nothing when the
	 * element is absent. The list is the thing that wants the edge, so the list asks for it.
	 *
	 * THE INLINE INSET IS NEGATED TOO, AND THE ROW BELOW PAYS IT BACK. This paragraph used to
	 * say the opposite — that only the bottom edge was reclaimed, because the list is indented
	 * to `grid-column: 2` and a file name has to start under the product name it belongs to.
	 * The premise is right and the conclusion did not follow from it. What has to stay put is
	 * the TEXT, and the text stays put when the box bleeds out by the inset and the row pads
	 * back in by the same name: the negation here and the `padding-inline` on
	 * `.account-card__file-link` below cancel exactly, at whatever value the token takes.
	 *
	 * WHAT IT FIXES. The hover fill and the focus ring started at the first letter of the file
	 * name and stopped at the card's content edge, so a lit row read as a highlighted line of
	 * text rather than as a row in a table. A cell's fill has to extend past its content or
	 * there is no cell. The hairlines gain the same width, which is the other half of that
	 * read: a divider that stops where the words stop is dividing the words, not the rows.
	 *
	 * AND THE TARGET GROWS WITH THE FILL, which is the part that is not decoration. The row is
	 * a 44px target and it is one inset wider at each end now, over ground the pointer already
	 * had to cross to reach the control.
	 *
	 * IT IS THE CARD'S OWN INSET AND NOT A SECOND NUMBER THAT MATCHES IT. The sub-row's
	 * padding IS the card's padding seen one level in, so it has to be the same name — two
	 * names that agree today are two names that disagree after the first edit.
	 *
	 * NOTHING COLLIDES AT EITHER END. Leading: the negation is one inset against the card's
	 * `column-gap`, which is the same 16px, so the fill stops exactly at the artwork column's
	 * edge and never under the tile. Trailing: it reaches the card's border edge, which is what
	 * the disclosure thirty rules up already does, and the list is `overflow: hidden` so the
	 * corner radius still clips it.
	 *
	 * NOTHING IS LEFT UNCLOSED. The next card's `border-block-start` draws the line under a
	 * row that now ends flush, and for the last card in the list the list's own bottom border
	 * does — see the surface rules in assets/css/account.css.
	 */
	margin: 10px calc(-1 * var(--f32-ledger-inset-inline)) calc(-1 * var(--f32-ledger-inset-block-end));
	padding: 0;
	border-block-start: 1px solid var(--wp--preset--color--border-subtle, #e0e0e0);
	list-style: none;
}

/*
 * `list-style: none` above is stated because this is a `<ul>` and the UA gives it markers;
 * `margin: 0` here because it is an `<li>` inside a card whose foot no longer has a box to
 * carry spacing, and core's flow layout writes `margin-block-start` for flow children at
 * 0,1,0. The hairline is per row rather than per gap, and the first one is the list's own
 * `border-block-start` above — so the rule below never needs a `:not(:last-child)` that
 * would have to be kept in step with the markup.
 */
.f32-account-orders__list--rows.f32-account-orders__list--ledger.f32-account-orders__list--history > .account-card .account-card__body .account-card__foot > .account-card__files > .account-card__file {
	margin: 0;
}

.f32-account-orders__list--rows.f32-account-orders__list--ledger.f32-account-orders__list--history > .account-card .account-card__body .account-card__foot > .account-card__files > .account-card__file + .account-card__file {
	border-block-start: 1px solid var(--wp--preset--color--border-subtle, #e0e0e0);
}

/*
 * THE ROW, AND IT IS ONE ANCHOR HOLDING BOTH HALVES. The plugin emits the name and the
 * action as two spans inside one `<a>` for the reason its own note gives: two links would
 * double the tab stops and read the row twice, and a plain-text name beside a link would
 * leave the larger half of the row dead to the pointer.
 *
 * `gap: 16px` matches the card's own `column-gap`, so the space between a file name and its
 * control is the space between the artwork and the title above it.
 *
 * `text-decoration: none` at three classes: theme.json's `:root :where(a:where(...))` is
 * 0,1,0 and its `:hover` underline 0,2,0, and this row is a box rather than a run of words —
 * the underline would be drawn across both halves and the 16px between them.
 */
.f32-account-orders__list--rows.f32-account-orders__list--ledger.f32-account-orders__list--history > .account-card .account-card__body .account-card__foot > .account-card__files .account-card__file-link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	min-height: 44px;
	/*
	 * THE INLINE PADDING IS THE REPAYMENT OF THE LIST'S NEGATIVE MARGIN AND NOT AN INSET OF
	 * ITS OWN. The `<ul>` above bleeds out by `--f32-ledger-inset-inline`; this pays the same
	 * name back, so every child's net offset is zero — the file name starts where the product
	 * name starts, and this pill's box ends where the row's own pill ends. The two lines are
	 * one decision written twice because CSS has no way to say "outset" on a box that paints.
	 * Change either without the other and the column shears.
	 *
	 * WHICH IS WHY THIS IS NOT THE DEFECT THIS LINE USED TO RECORD. It carried
	 * `padding-inline-end: 16px` for exactly as long as the control half was bare text: the
	 * row's own control is a pill with `padding: 0 16px`, so its LABEL stops 16px short of the
	 * card's edge while its BOX reaches it, and a text label running to the edge sat 16px out
	 * of line with it. When the control half became that same pill, the borrowed 16px was a
	 * SECOND copy of an inset that nothing had negated, and it pushed this pill 16px inside the
	 * one above — measured, 979 against the row control's 995. Two paddings for one inset.
	 * Here there are two paddings for two insets, one of them negative, and the pill is back at
	 * that same 995.
	 *
	 * `padding-block` IS THE CARD'S OWN INSET TOO, AND THAT IS WHAT HOLDS THE TWO LEVELS AT
	 * ONE ROW HEIGHT. It was 4px — an optical nudge left over from the days when the control
	 * half was bare text. It survived the change that made that half a 44px pill, and the
	 * list has been drawn at two rhythms ever since.
	 *
	 * MEASURED ON STAGING BEFORE THIS CHANGE, at a 936px panel: a delivery row is
	 * 16 + 44 + 16 = 76px and a file row was 4 + 44 + 4 = 52px. Both levels are floored by
	 * the SAME 44px control — the row's `__download` and this row's `__file-get` are the same
	 * pill, drawn by the same rules, and their boxes measure 1219.8..1354.5 on both. The
	 * inset each level paid was the only thing that ever made the rows differ.
	 *
	 * THE EQUALITY IS DERIVED AND NOT ASSERTED, which is why this reads the token and not
	 * `16px`, and certainly not a `row.height` of `76px`. Move `surface.object.pad` and every
	 * row at both levels moves with it and stays level. A token holding 76px would do the
	 * opposite: 76 is arithmetic over the 44px target floor and the inset, so a token holding
	 * the sum drifts from its own parts the first time either of them changes. A token holds
	 * a decision; this is a consequence of two.
	 *
	 * IT COSTS 24px A ROW AND THE TRADE IS RECORDED RATHER THAN HIDDEN. The two-file
	 * delivery measured above goes from 172.7px to 220.7px. The ledger round bought its page
	 * height by removing repetition — seven filled pills, seven copies of one badge — and not
	 * by drawing one kind of row shorter than the kind above it. A list whose rows disagree
	 * about their height is not a table, and the whole of this section is an argument that it
	 * should read as one.
	 */
	padding-block: var(--wp--custom--surface--object--pad, 1rem);
	padding-inline: var(--f32-ledger-inset-inline);
	color: var(--wp--preset--color--primary, #000000);
	text-decoration: none;
}

.f32-account-orders__list--rows.f32-account-orders__list--ledger.f32-account-orders__list--history > .account-card .account-card__body .account-card__foot > .account-card__files .account-card__file-link:hover,
.f32-account-orders__list--rows.f32-account-orders__list--ledger.f32-account-orders__list--history > .account-card .account-card__body .account-card__foot > .account-card__files .account-card__file-link:focus-visible {
	background: var(--wp--preset--color--subtle, #f5f5f5);
	text-decoration: none;
}

/*
 * The ring traces the row and sits INSIDE it, for the reason the History focus rule states:
 * the card is `overflow: hidden` and this row now bleeds to the card's trailing edge, so an
 * outside ring would be drawn in the clipped region and lose its ends.
 */
.f32-account-orders__list--rows.f32-account-orders__list--ledger.f32-account-orders__list--history > .account-card .account-card__body .account-card__foot > .account-card__files .account-card__file-link:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent, #1473e6);
	outline-offset: -2px;
}

/*
 * The name. 13px against the parent title's 14px/600 — a file is a part of the thing named
 * above it, not a second thing — and `min-width: 0` with `overflow-wrap` so a long
 * unbroken filename wraps inside its own half rather than pushing the control off the row.
 */
.f32-account-orders__list--rows.f32-account-orders__list--ledger.f32-account-orders__list--history > .account-card .account-card__body .account-card__foot > .account-card__files .account-card__file-name {
	min-width: 0;
	font-size: 13px;
	line-height: 1.35;
	overflow-wrap: anywhere;
}

/*
 * THE CONTROL HALF IS THE ROW'S OWN CONTROL, DRAWN THE SAME WAY. Not "similar to" — the same
 * geometry and the same three paint variables, so the two levels of this list cannot answer
 * the pointer differently.
 *
 * WHAT THIS FIXES. It used to be bare text that changed colour on hover: `accent` ink going
 * to `action` ink, with no box at either end. Its rest state was right by accident — the
 * row's control is also `accent`-on-nothing at rest — and its HOVER state was the defect,
 * because the row above it becomes a filled `action` pill and this became slightly darker
 * text. Same list, same words, same pointer, two different answers.
 *
 * WHY THE PILL RATHER THAN LEAVING BOTH AS TEXT. account-card.css carries three control
 * registers and they are a ladder: the primary filled pill (`action` fill, `contrast` ink),
 * the secondary outline tier further up this file (`contrast` fill, `primary` ink, `muted`
 * edge), and the quiet link (`accent` ink, no box) that the receipt's exits and the ledger's
 * invoice link use. The History section put its control on the quiet rung AT REST and the
 * primary rung UNDER THE POINTER, which is the whole idea of the section — the row is the
 * target, so its control stays out of the way until the row is being aimed at. A file row is
 * a row in the same list; it belongs on the same rung at both ends.
 *
 * THE THREE VARIABLES ARE WHY THIS IS SHORT. `--f32-card-control-fill`, `-ink` and `-edge`
 * are the indirection the base card was built with, and the History rest rule already sets
 * all three on `.account-card`. This span is a descendant, so it inherits them and needs no
 * rest colours of its own — a future repaint of the account's quiet control moves the row's
 * control and the file's together, which is the property that was missing when this was a
 * hard-coded `color`.
 *
 * `border: 1px solid` AND NOT `border: 0`, for the reason the base control rule records: the
 * border box is painted with the element's own background, so a transparent edge is
 * invisible on a filled pill, and sizing the box WITH the border keeps this pill the same
 * height as the row's whether or not an edge is ever drawn.
 *
 * IT IS STILL A `<span>` AND STILL NOT A TARGET. The anchor around it is the control; a
 * nested one would be a second target for the same destination. The 44px here is the pill's
 * PAINT rather than a target floor — the floor is the row's, and the row is larger than this.
 */
.f32-account-orders__list--rows.f32-account-orders__list--ledger.f32-account-orders__list--history > .account-card .account-card__body .account-card__foot > .account-card__files .account-card__file-get {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 0 16px;
	border: 1px solid var(--f32-card-control-edge, transparent);
	border-radius: var(--wp--custom--border-radius--full, 9999px);
	background: var(--f32-card-control-fill, transparent);
	color: var(--f32-card-control-ink, var(--wp--preset--color--accent, #1473e6));
	font-size: 13px;
	font-weight: 600;
	line-height: 1.45;
	white-space: nowrap;
}

/*
 * Under the pointer, the same three values the row's own control takes — `action` fill,
 * `contrast` ink, transparent edge — set as VARIABLES on the file row rather than as colours
 * on the span, so this state and the rest state above are expressed in the same terms.
 *
 * SET ON THE ANCHOR AND NOT ON THE SPAN, which is what makes `:hover` mean the whole row:
 * the anchor is the row, the span is 101px of it, and a hover keyed to the span would light
 * the pill only when the pointer was already on the words. The row's own `subtle` fill is
 * declared beside it for the same reason the History row declares it — a lit pill on a white
 * row says "this pill is the target", which is the claim both levels of this list withdraw.
 */
.f32-account-orders__list--rows.f32-account-orders__list--ledger.f32-account-orders__list--history > .account-card .account-card__body .account-card__foot > .account-card__files .account-card__file-link:hover,
.f32-account-orders__list--rows.f32-account-orders__list--ledger.f32-account-orders__list--history > .account-card .account-card__body .account-card__foot > .account-card__files .account-card__file-link:focus-visible {
	--f32-card-control-fill: var(--wp--preset--color--action, #1d4ed8);
	--f32-card-control-edge: transparent;
	--f32-card-control-ink: var(--wp--preset--color--contrast, #ffffff);
}

/*
 * THE NARROW PANEL STACKS THE TWO HALVES, and it is the same judgement the Ledger makes one
 * level out at the same threshold: below 640px of PANEL there is not room for a name and a
 * control side by side, so the control goes on a line of its own.
 *
 * MEASURED BEFORE THIS RULE, at a 386px viewport: the files list is the title column, ~223px
 * wide, and "Download again" is a 101px `nowrap` item, so a file name was left 106px and
 * "20 Coffee Tones Lightroom Presets and LUTs" wrapped to three lines — a 96px row for one
 * file. Stacked it is one line of name over one line of control, and the row is 47px.
 *
 * `flex-start` AND NOT `flex-end` for the dropped control, because the parent row does the
 * same thing at the same width: below 640px the Ledger gives `acts` a full-width row of its
 * own with `justify-self: start`, so the row's control is at the card's leading edge. A file
 * control hanging off the trailing edge would be the only thing on the phone layout aligned
 * to the right.
 *
 * `flex: 1 0 100%` on the name rather than `flex-wrap` alone: wrapping only happens when the
 * items do not fit, and a SHORT filename does fit — which would leave a two-file delivery
 * with one stacked row and one side-by-side row, the two arrangements one hairline apart.
 * A full-width basis makes the stack unconditional at this width.
 */
@container f32-account-panel (max-width: 639.98px) {
	.f32-account-orders__list--rows.f32-account-orders__list--ledger.f32-account-orders__list--history > .account-card .account-card__body .account-card__foot > .account-card__files .account-card__file-link {
		flex-wrap: wrap;
		justify-content: flex-start;
		/*
		 * 6px, UP FROM 2px, AND IT IS THE ONLY GAP IN THE STACK NOW. When the control half
		 * was text, 2px separated two lines of type and the row's padding did the rest. It
		 * is a 44px pill on its own line here, and 2px put its edge against the descenders
		 * of the filename above it.
		 */
		row-gap: 6px;
		/*
		 * 8px AND NOT THE BASE RULE'S 4px, because a stacked row has no slack of its own to
		 * give. Side by side the row is one 19px line inside `min-height: 44px`, so it
		 * carries ~12.5px above and below the text for free and the padding barely shows.
		 * Stacked it is two lines plus a gap - 47px of content in a 44px floor - so the
		 * min-height is already exceeded and the ONLY breathing room is this padding.
		 *
		 * Measured at 386px before the change: 5px above the first name and 6px under the
		 * last control, against the 14px and 15px the same list gets on a desktop panel.
		 * Symmetric, so it read as deliberate rather than broken, but tight against the
		 * hairline the next delivery draws immediately below it. 8px puts both ends near
		 * 10px and costs ~16px per multi-file delivery, which is the right trade on the one
		 * layout where a control sits directly under a filename.
		 *
		 * IT CAME BACK DOWN TO 4px WHEN THE CONTROL BECAME A PILL. The 8px above was bought
		 * to keep two lines of TEXT off the hairlines; the second line is a 44px pill now and
		 * carries its own mass, so 8px on top of it was padding a box that no longer needed
		 * it — 97px and 80px rows against the 52px the same two files take side by side.
		 * The paragraph above is kept rather than deleted because the measurement in it is
		 * still the reason this branch exists at all.
		 *
		 * `row-gap` DOES THE SEPARATING INSTEAD, at 6px, and it has to stay clearly smaller
		 * than the distance ACROSS the hairline to the next file: that gap is a file's name
		 * and that file's own control, which are one object on two lines.
		 *
		 * IT IS AN OVERRIDE NOW AND NOT A LEFTOVER. The base rule reads the card's own inset
		 * here, to hold the two levels of the list at one row height, and that argument is
		 * about a row whose tallest child is ONE 44px pill. It does not carry to a row that is
		 * a name over a pill and clears the floor by itself. Only this half is restated, so
		 * the base rule's `padding-inline` — the repayment of the list's negative margin —
		 * survives into the stacked layout, where the bled fill matters more rather than less.
		 */
		padding-block: 4px;
	}

	.f32-account-orders__list--rows.f32-account-orders__list--ledger.f32-account-orders__list--history > .account-card .account-card__body .account-card__foot > .account-card__files .account-card__file-name {
		flex: 1 0 100%;
	}
}