/**
 * The Wicked — Stat Toggle (tw-stat-toggle).
 * A disclosure: a button, an animated panel, a list of label/value rows. From
 * design-reference/studio-v04.html L611-631 (the "scoreboard" cell of section 5).
 *
 * ── FIVE THINGS HERE THAT ARE NOT STYLE CHOICES ───────────────────────────────
 * 1. `grid-template-rows: minmax(0,0fr) -> minmax(0,1fr)` INSTEAD OF the reference's
 *    `max-height: 0 -> 280px`. That 280px is a hand-measured magic number for its
 *    own three rows: at two rows it overshoots and the transition finishes early,
 *    at five it clips the list entirely. The grid technique needs no measurement
 *    and survives a font swap, a copy change and a row added in the editor. A
 *    browser that cannot interpolate `fr` gets an instant open — an acceptable
 *    degradation needing no @supports, since `0fr` PARSES everywhere grid does
 *    and a feature query could not detect it.
 * 2. `min-height:0` ON .tw-st__rows, AND ALL PADDING ON .tw-st__row. A clipped
 *    box cannot shrink below its own padding (PROJECT-NOTES §6c), and the same is
 *    true of a 0fr row. Put padding on the panel and the disclosure never closes.
 *    ⚠️ min-height:0 alone is NOT enough, which is why the track is minmax()ed —
 *    it zeroes the CONTENT contribution, not the item's margin and border. See
 *    the measurement in the .tw-st__panel block.
 * 3. `.tw-st .tw-st__toggle:hover` IS (0,3,0) AND HAS TO BE. Hello Elementor
 *    paints every <button> pink on hover and focus; shared.css cancels the
 *    BACKGROUND at (0,2,1), but the theme also touches `color`. An unprefixed
 *    `.tw-st__toggle:hover` would be (0,1,1) and could lose silently.
 * 4. `:focus-visible` USES outline-offset:3px, not the reveal list's inset -2px:
 *    this button is inline-sized with clear space around it, so the house ring
 *    applies as written.
 * 5. THE REDUCED-MOTION BLOCK IS LAST, ROOT-PREFIXED AND `!important`.
 *    Root-prefixing only reaches (0,2,0); the `duration` control writes a
 *    `transition` SHORTHAND at (0,4,0) and no stylesheet specificity can reach
 *    it. ⚠️ NO OTHER RULE IN THIS FILE MAY RESTATE `transition` ON
 *    .tw-st__panel — a later shorthand re-sets duration and cancels that block
 *    silently (PROJECT-NOTES §6b).
 *
 * ── NO MEDIA QUERIES EXCEPT prefers-reduced-motion, DELIBERATELY ──────────────
 * Every geometric property here (gap, chevron size, row padding, the space above
 * the rows) is owned by a NON-responsive control compiling un-mediated at
 * (0,4,0). A media query in this file touching any of them could never apply —
 * PROJECT-NOTES §6a, the bug this plugin has shipped four times. Before adding
 * one, move the property to a responsive control carrying a value at EVERY
 * breakpoint instead.
 */

.tw-st {
	width: 100%;
}

.tw-st__toggle {
	display: inline-flex;
	align-items: center;
	gap: 14px;                                     /* toggle_gap overrides */
	min-height: 44px;                              /* hit-target floor — not a control */
	margin: 0;
	padding: 0;
	appearance: none;
	background: none;
	border: 0;
	font-family: var(--tw-font-display);
	font-weight: 500;
	font-style: italic;
	font-size: 1.4rem;                             /* the page may supply a clamp in custom_css */
	line-height: 1.3;
	color: var(--e-global-color-secondary, #e9e6df);
	/* ⛔ THESE TWO ARE THE LONG-LABEL DEFENCE, AND `white-space` UNDOES A THEME
	   RESET. Hello Elementor's reset.css ships
	   `[type=button],[type=submit],button{ … white-space:nowrap}` and this is a
	   real <button type="button">, so without the reset an inline-flex box is its
	   label's max-content width in whatever cell it sits in — `min-width:0` does
	   nothing to a box sized to max-content. Measured on 654 before this: 205px of
	   sideways page scroll at 768, 89px at 1024, 24px at 1440, from this element
	   alone. `max-width:100%` caps the box at the cell; `normal` lets the label
	   use the second line rather than the next cell.
	   ⚠️ WRAP, NOT TRUNCATE, ON PURPOSE — wrapping never hides content, and
	   `text-overflow:ellipsis` is a design decision nobody has taken. If the label
	   should stay on one line instead, that is the alternative and it needs a
	   decision, not a default. */
	white-space: normal;
	max-width: 100%;
	text-align: left;
	cursor: pointer;
	transition: color .3s ease;
}

/* A flex item's automatic minimum size is min-content, which would push straight
   back through the max-width above the moment one word is longer than the cell.
   Second half of the same fix, not an extra. */
.tw-st__label {
	min-width: 0;
	overflow-wrap: break-word;
}

.tw-st .tw-st__toggle:hover {
	color: var(--tw-tan-hi, #c9a074);
}

.tw-st .tw-st__toggle:focus-visible {
	outline: 2px solid var(--tw-tan-hi, #c9a074);
	outline-offset: 3px;
	border-radius: 2px;
}

.tw-st__chev {
	flex: none;
	transform: rotate(0deg);
	transition: transform .3s ease;
}

.tw-st.is-open .tw-st__chev {
	transform: rotate(180deg);
}

/* --- the disclosure ------------------------------------------------------- */
.tw-st__panel {
	display: grid;
	/* ⚠️ minmax(0, 0fr), NOT a bare `0fr` — MEASURED, not preferred. A bare `0fr`
	   is `minmax(auto, 0fr)`, and that `auto` floor is the item's OUTER minimum:
	   it counts .tw-st__rows' margin-top and border-top even though `min-height:0`
	   has zeroed the content contribution. A closed panel measured 24px tall
	   (20px gap + 1px hairline, +3 from the test's own gap value) and the divider
	   stayed visible under a closed toggle. A fixed 0 minimum makes the track 0
	   whatever the item carries, and the overflow rule clips the rest. Both sides
	   are minmax() with the same minimum so the pair still interpolates. */
	grid-template-rows: minmax(0, 0fr);
	opacity: 0;
	overflow: hidden;
	/* duration overrides both halves; this is the graceful-degradation value. */
	transition: grid-template-rows 700ms cubic-bezier(.6, 0, .2, 1), opacity 500ms ease;
}

.tw-st.is-open .tw-st__panel {
	grid-template-rows: minmax(0, 1fr);
	opacity: 1;
}

/* One frame at init, while the JS applies the per-breakpoint start state. Without
   it, an instance set to open at mobile ANIMATES open on load. `!important` is
   not decoration: `duration` writes `transition` at (0,4,0) and this rule is
   (0,2,0). Declared ABOVE the reduced-motion block, which must stay last. */
.tw-st.is-preinit .tw-st__panel,
.tw-st.is-preinit .tw-st__chev {
	transition: none !important;
}

.tw-st__rows {
	min-height: 0;                                 /* what lets the 0fr row collapse */
	margin: 20px 0 0;                              /* panel_gap overrides the top */
	/* Longhands, never the `border` shorthand: a shorthand built from a var that
	   fails to resolve computes to `none` and vanishes silently (§6b). */
	border-top-width: 1px;
	border-top-style: solid;
	border-top-color: var(--e-global-color-cdc1318, rgba(255, 255, 255, .09));
}

.tw-st__row {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 24px;
	padding: 20px 0;                               /* row_padding overrides the y */
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: var(--e-global-color-cdc1318, rgba(255, 255, 255, .09));
}

.tw-st__row:last-child {
	border-bottom-width: 0;
}

.tw-st__label-txt {
	margin: 0;
	font-family: var(--e-global-typography-text-font-family, 'Inter', sans-serif);
	font-size: .9375rem;
	line-height: 1.5;
	color: var(--e-global-color-0c2c23a, #9d9a92);
}

/* `margin:0` also cancels the UA's `dd{margin-inline-start:40px}`. */
.tw-st__value {
	margin: 0;
	font-family: var(--e-global-typography-secondary-font-family, 'Cormorant Garamond', serif);
	font-weight: 600;
	font-size: 1.75rem;
	line-height: 1;
	color: var(--e-global-color-accent, #B18051);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

/* --- LAST IN THE FILE, root-prefixed, !important --------------------------
   ⚠️ Prove this with Elementor's frontend.css out of the cascade — it ships
   `html *{transition-duration:0s!important}`, which can mask a failure here and
   can vanish in any release. No information is lost when it applies: the state
   is carried by aria-expanded, the chevron's final angle and the label text. */
@media (prefers-reduced-motion: reduce) {
	.tw-st .tw-st__panel,
	.tw-st .tw-st__toggle,
	.tw-st .tw-st__chev { transition-duration: 0s !important; }
}