/* Theme: CastleWindows */

:root {

	/* -- Border Radius --------- from Figma General/bdr-*-rds: 10px all corners -- */

	--bdr-rds: 0rem; /* { min: 0,  max: 5, step: 0.1, friendly: 'Border Radius', group: 'Calculations' } */
	--bdr-tl-rds: 1; /* { min: 0,  max: 1, step: 0.25, friendly: 'Border Radius - Top Left Corner', group: 'Calculations' } */
	--bdr-tr-rds: 1; /* { min: 0,  max: 1, step: 0.25, friendly: 'Border Radius - Top Right Corner', group: 'Calculations' } */
	--bdr-br-rds: 1; /* { min: 0,  max: 1, step: 0.25, friendly: 'Border Radius - Bottom Right Corner', group: 'Calculations' } */
	--bdr-bl-rds: 1; /* { min: 0,  max: 1, step: 0.25, friendly: 'Border Radius - Bottom Left Corner', group: 'Calculations' } */

	/* -- Card Border Radius ----- from Figma Card/bdr-*-rds-crd: 10px all corners -- */

	--bdr-rds-crd: 0rem; /* { min: 0,  max: 5, step: 0.1, friendly: 'Card Border Radius', group: 'Calculations' } */
	--bdr-tl-rds-crd: 1; /* { min: 0,  max: 1, step: 0.25, friendly: 'Card Border Radius - Top Left Corner', group: 'Calculations' } */
	--bdr-tr-rds-crd: 1; /* { min: 0,  max: 1, step: 0.25, friendly: 'Card Border Radius - Top Right Corner', group: 'Calculations' } */
	--bdr-br-rds-crd: 1; /* { min: 0,  max: 1, step: 0.25, friendly: 'Card Border Radius - Bottom Right Corner', group: 'Calculations' } */
	--bdr-bl-rds-crd: 1; /* { min: 0,  max: 1, step: 0.25, friendly: 'Card Border Radius - Bottom Left Corner', group: 'Calculations' } */

	/* -- Box Shadow --- from Figma General/bx-sdw 0/15/22px; rendered at 30% alpha -- */

	--bx-sdw-x: 0em; /* { min: 0,  max: 4, step: 0.1, friendly: 'Box Shadow \'X\' Position', group: 'Box Shadow' } */
	--bx-sdw-y: 0.9375em; /* { min: 0,  max: 4, step: 0.1, friendly: 'Box Shadow \'Y\' Position', group: 'Box Shadow' } */
	--bx-sdw-blr: 1.375em; /* { min: 0,  max: 4, step: 0.1, friendly: 'Box Shadow Blur', group: 'Box Shadow' } */
	--bx-sdw-o: 0.3; /* { min: 0,  max: 1, step: 0.05, friendly: 'Box Shadow Opacity', group: 'Box Shadow' } */

	/* -- Desktop Box Shadow ------------------- mirrors General; no own token -- */

	--bx-sdw-dsk-x: 0em; /* { min: 0,  max: 4, step: 0.1, friendly: 'Desktop Only Box Shadow \'X\' Position', group: 'Box Shadow' } */
	--bx-sdw-dsk-y: 0.9375em; /* { min: 0,  max: 4, step: 0.1, friendly: 'Desktop Only Box Shadow \'Y\' Position', group: 'Box Shadow' } */
	--bx-sdw-dsk-blr: 1.375em; /* { min: 0,  max: 4, step: 0.1, friendly: 'Desktop Only Box Shadow Blur', group: 'Box Shadow' } */
	--bx-sdw-dsk-o: 0.3; /* { min: 0,  max: 1, step: 0.05, friendly: 'Desktop Only Box Shadow Opacity', group: 'Box Shadow' } */

	/* -- Card Box Shadow --- from Figma cards as rendered: 0/4/10px @ 50% alpha -- */

	--bx-sdw-crd-x: 0em; /* { min: 0,  max: 4, step: 0.1, friendly: 'Card Box Shadow \'X\' Position', group: 'Box Shadow' } */
	--bx-sdw-crd-y: 0.25em; /* { min: 0,  max: 4, step: 0.1, friendly: 'Card Box Shadow \'Y\' Position', group: 'Box Shadow' } */
	--bx-sdw-crd-blr: 0.625em; /* { min: 0,  max: 4, step: 0.1, friendly: 'Card Box Shadow Blur', group: 'Box Shadow' } */
	--bx-sdw-crd-o: 0.5; /* { min: 0,  max: 1, step: 0.05, friendly: 'Card Box Shadow Opacity', group: 'Box Shadow' } */

	/* -- Button V1 Padding --- measured from design buttons: 16px / 32px (no Figma token) -- */

	--btn-v1-pd-t: 1rem; /* { min: 0.5, max: 2, step: 0.1, friendly: 'Button V1 Padding Top' } */
	--btn-v1-pd-b: 1rem; /* { min: 0.5, max: 2, step: 0.1, friendly: 'Button V1 Padding Bottom' } */
	--btn-v1-pd-l: 2rem; /* { min: 0.5, max: 2, step: 0.1, friendly: 'Button V1 Padding Left' } */
	--btn-v1-pd-r: 2rem; /* { min: 0.5, max: 2, step: 0.1, friendly: 'Button V1 Padding Right' } */
	--btn-v1-pd: var(--btn-v1-pd-t) var(--btn-v1-pd-r) var(--btn-v1-pd-b) var(--btn-v1-pd-l); /* { readonly: true } */

	/* -- Button V1 Small Variant --- measured from design Short buttons: 8px / 32px -- */

	--btn-v1-pd-v-mtp: 0.5; /* { min: 0.2, max: 0.8, step: 0.05, friendly: 'Button V1 Small Vertical Padding Multiplier' } */
	--btn-v1-pd-h-mtp: 1; /* { min: 0.2, max: 1, step: 0.05, friendly: 'Button V1 Small Horizontal Padding Multiplier' } */ /* design keeps full 32px horizontal padding on short buttons */

	/* -- Button V1 Border Radius --- from design: buttons are square (0) -- */

	--btn-v1-bdr-rds-tl: 0rem; /* { min: 0, max: 2, step: 0.1, friendly: 'Button V1 Border Radius Top Left' } */
	--btn-v1-bdr-rds-tr: 0rem; /* { min: 0, max: 2, step: 0.1, friendly: 'Button V1 Border Radius Top Right' } */
	--btn-v1-bdr-rds-br: 0rem; /* { min: 0, max: 2, step: 0.1, friendly: 'Button V1 Border Radius Bottom Right' } */
	--btn-v1-bdr-rds-bl: 0rem; /* { min: 0, max: 2, step: 0.1, friendly: 'Button V1 Border Radius Bottom Left' } */
	--btn-v1-bdr-rds: var(--btn-v1-bdr-rds-tl) var(--btn-v1-bdr-rds-tr) var(--btn-v1-bdr-rds-br) var(--btn-v1-bdr-rds-bl); /* { readonly: true } */

	/* -- Button V1 Box Shadow ------ from design: buttons carry no shadow ------- */

	--btn-v1-bx-sdw-x: 0rem; /* { min: 0, max: 2, step: 0.1, friendly: 'Button V1 Box Shadow \'X\' Position' } */
	--btn-v1-bx-sdw-y: 0rem; /* { min: 0, max: 2, step: 0.1, friendly: 'Button V1 Box Shadow \'Y\' Position' } */
	--btn-v1-bx-sdw-blr: 1rem; /* { min: 0, max: 4, step: 0.1, friendly: 'Button V1 Box Shadow Blur' } */
	--btn-v1-bx-sdw-o: 0; /* { min: 0, max: 1, step: 0.05, friendly: 'Button V1 Box Shadow Opacity' } */

	/* -- Button V1 Border (Alt Variant) --- from design: V1 Alt buttons stroke 3px -- */

	--btn-v1-bdr-w: 3px; /* { min: 1, max: 3, step: 0.1, friendly: 'Button V1 Border Width' } */
	--btn-v1-bdr-stl: solid; /* { friendly: 'Button V1 Border Style' } */

	/* -- Button V2 Padding --- design draws 16px / 32px with a 3px INSIDE stroke;
	   border-box means padding must absorb the border for V2 to match V1's 58px height -- */

	--btn-v2-pd-t: 0.8125rem; /* { min: 0.5, max: 2, step: 0.1, friendly: 'Button V2 Padding Top'  } */
	--btn-v2-pd-b: 0.8125rem; /* { min: 0.5, max: 2, step: 0.1, friendly: 'Button V2 Padding Bottom'  } */
	--btn-v2-pd-l: 1.8125rem; /* { min: 0.5, max: 2, step: 0.1, friendly: 'Button V2 Padding Left'  } */
	--btn-v2-pd-r: 1.8125rem; /* { min: 0.5, max: 2, step: 0.1, friendly: 'Button V2 Padding Right'  } */
	--btn-v2-pd: var(--btn-v2-pd-t) var(--btn-v2-pd-r) var(--btn-v2-pd-b) var(--btn-v2-pd-l); /* { readonly: true  } */

	/* -- Button V2 Border Radius --- from design: buttons are square (0) -- */

	--btn-v2-bdr-rds-tl: 0rem; /* { min: 0, max: 2, step: 0.1, friendly: 'Button V2 Border Radius Top Left'  } */
	--btn-v2-bdr-rds-tr: 0rem; /* { min: 0, max: 2, step: 0.1, friendly: 'Button V2 Border Radius Top Right'  } */
	--btn-v2-bdr-rds-br: 0rem; /* { min: 0, max: 2, step: 0.1, friendly: 'Button V2 Border Radius Bottom Right'  } */
	--btn-v2-bdr-rds-bl: 0rem; /* { min: 0, max: 2, step: 0.1, friendly: 'Button V2 Border Radius Bottom Left'  } */
	--btn-v2-bdr-rds: var(--btn-v2-bdr-rds-tl) var(--btn-v2-bdr-rds-tr) var(--btn-v2-bdr-rds-br) var(--btn-v2-bdr-rds-bl); /* { readonly: true  } */

	/* -- Button V2 Box Shadow + Border --- from design: no shadow; outline buttons stroke 3px -- */

	--btn-v2-bx-sdw-x: 0rem; /* { min: 0,  max: 2, step: 0.1, friendly: 'Button V2 Box Shadow \'X\' Position' } */
	--btn-v2-bx-sdw-y: 0rem; /* { min: 0,  max: 2, step: 0.1, friendly: 'Button V2 Box Shadow \'Y\' Position' } */
	--btn-v2-bx-sdw-blr: 1rem; /* { min: 0, max: 4, step: 0.1, friendly: 'Button V2 Box Shadow Blur' } */
	--btn-v2-bx-sdw-o: 0; /* { min: 0, max: 1, step: 0.05, friendly: 'Button V2 Box Shadow Opacity' } */

	--btn-v2-bdr-w: 3px; /* { min: 1, max: 3, step: 0.1, friendly: 'Button V2 Border Width'  } */
	--btn-v2-bdr-stl: solid; /* { friendly: 'Button V2 Border Style'  } */

	/* -- Button Transitions --- motion is not specified in the static design; adopted standard -- */

	--btn-trn-sp: 0.3s; /* { min: 0, max: 1, step: 0.05, friendly: 'Button Transition Speed' } */
	--btn-trn-tf: ease; /* { friendly: 'Button Transition Timing Function' } */

	/* -- Button Hover Frame --- the sash motion shared by both button variants:
	   V1 has no frame and closes one over itself on hover, V2 wears its frame and
	   opens it away. Same vocabulary, opposite direction. Travel is a percentage
	   of the button width, so the sashes take the same time to cross a narrow
	   button as a wide one. -- */

	--btn-hvr-frm-sp: 0.42s; /* { min: 0, max: 1.5, step: 0.02, friendly: 'Button Hover Frame Speed' } */
	--btn-hvr-frm-tf: cubic-bezier(0.22, 1, 0.36, 1); /* { friendly: 'Button Hover Frame Timing Function' } */
	--btn-hvr-frm-trv: 38%; /* { friendly: 'Button Hover Frame Travel' } */
	--btn-hvr-frm-fd-sp: 0.16s; /* { min: 0, max: 1, step: 0.02, friendly: 'Button Hover Frame Fade Speed' } */
	--btn-hvr-frm-lap: 1px; /* { min: 0, max: 4, step: 0.5, friendly: 'Button Hover Frame Overlap' } */

	/* -- Button Arrow --- the mark travelling through its own window on hover.
	   Travel is in the icon's viewBox units, and it doubles as the spacing
	   between the two copies, so the arriving mark lands exactly where the
	   departing one started. Speed and easing default to the frame's so the
	   arrow and the sashes read as one gesture.

	   16, not the viewBox's own width of 15: the icon's viewport is square
	   (1em x 1em) while its viewBox is 15x16, so preserveAspectRatio scales to
	   the HEIGHT and leaves half a unit of letterbox slack at each side. The
	   visible window is therefore 16 units wide, not 15, and a 15 travel parks
	   the departing mark's narrow bar at x=15 — still half a unit inside the
	   window, showing as a hairline at the right edge (and the trailing copy
	   showing the same at the left when at rest). Travelling one full WINDOW
	   clears both. The slack is a ratio, so this holds at any icon size. -- */

	--btn-arw-trv: 16px; /* { min: 0, max: 30, step: 0.5, friendly: 'Button Arrow Travel' } */
	--btn-arw-sp: 0.42s; /* { min: 0, max: 1.5, step: 0.02, friendly: 'Button Arrow Speed' } */
	--btn-arw-tf: cubic-bezier(0.22, 1, 0.36, 1); /* { friendly: 'Button Arrow Timing Function' } */

	/* -- Flair (Shapes & Decorative) --- DRAFT: carried from SplashSquad until Castle flair artwork lands -- */

	--flr-bx-w: 395; /* { min: 100, max: 800, step: 1, friendly: 'Flair Width Desktop', group: 'Shapes & Decorative' } */
	--flr-bx-w-mbl: 293; /* { min: 100, max: 600, step: 1, friendly: 'Flair Width Mobile', group: 'Shapes & Decorative' } */
	--flr-bx-w-clc: calc((var(--flr-bx-w-mbl) * 1px) + (var(--flr-bx-w) - var(--flr-bx-w-mbl)) * ((var(--vw_) - 320px) / (1920 - 320))); /* { readonly: true } */
	--flr-mrg-tp: 1rem; /* { min: 0, max: 4, step: 0.1, friendly: 'Flair Margin Top', group: 'Shapes & Decorative' } */
	--flr-mrg-bt: 1rem; /* { min: 0, max: 4, step: 0.1, friendly: 'Flair Margin Bottom', group: 'Shapes & Decorative' } */
	--shape-opacity: 0.1; /* { min: 0, max: 1, step: 0.05, friendly: 'Shape Opacity', group: 'Shapes & Decorative' } */ /* the design's window-pane patterns ship as artwork; adopted default */

	/* -- Containers & Cards Border --- from design: dominant drawn stroke is 3px; opacity from bdr token (40%) -- */

	--bg-bx-bdr-thc: 3px; /* { min: 1, max: 20, step: 1, friendly: 'BG Box Border Width' } */
	--bg-bx-bdr-clr-o: 0.4; /* { min: 0.1, max: 1, step: 0.1, friendly: 'BG Box Border Opacity' } */
	--crd-bdr-w: 1px; /* { min: 1, max: 4, step: 1, friendly: 'Card Border Width', group: 'Containers & Cards Border' } */ /* no Figma token */

	/* -- Dividers & Separators --- from design: divider lines 3px; opacity from bdr token (40%) -- */

	--bdr-stl: solid; /* { friendly: 'Border Style', group: 'Borders' } */
	--bdr-w: 3px; /* { min: 1, max: 4, step: 1, friendly: 'Border Width', group: 'Borders' } */
	--bdr-clr-o: 0.4; /* { min: 0.05, max: 1, step: 0.05, friendly: 'Border Opacity', group: 'Borders' } */

	/* -- Content List Bullets --- from Figma List/bullet: a 14.597 x 16 two-pane
	   "window" mark set 16px from the copy, on a 24px (1.5) line. Sized in em so
	   the mark tracks the fluid content font size. -- */

	--lst-blt-w: 0.9125em; /* { min: 0.3, max: 2, step: 0.0125, friendly: 'Content List Bullet Width', group: 'Content Lists' } */
	--lst-blt-h: 1em; /* { min: 0.3, max: 2, step: 0.025, friendly: 'Content List Bullet Height', group: 'Content Lists' } */
	--lst-blt-gp: 1em; /* { min: 0, max: 3, step: 0.05, friendly: 'Content List Bullet Gap', group: 'Content Lists' } */
	--lst-blt-ind: calc(var(--lst-blt-w) + var(--lst-blt-gp)); /* { readonly: true } */

}


/* -- Structural flourishes: Castle Windows button hover treatment ------------- */
/* The design's buttons do NOT do the framework's crossover fill-flip on hover:
   V1 keeps its yellow fill and dark text and gains a 3px inner stroke;
   V2 keeps its charcoal border and text and fills with yellow.
   Pinning the hover tokens to the button's own palette tokens on the .btn
   element itself beats every ancestor palette / flip context, because custom
   properties declared on the element win over inherited values. */

.btn {

	&.v1,
	&.v2 {
		--btn-hvr-pry: var(--btn-pry);
		--btn-hvr-pry-txt: var(--btn-pry-txt);
	}

	/* V1's hover stroke is two half-frames that travel in from the left and
	   right jambs and meet at the centre — a window closing. They are drawn on
	   the button's own ::before/::after (neither slot is used by anything else
	   on this site) rather than as an outline, because outline cannot be
	   animated directionally. The button's geometry still never changes between
	   states: the frame is inset INSIDE the button box, so the design's 58px
	   holds in both, exactly as the outline build did.

	   The rest state is driven by two inherited custom properties rather than by
	   a second selector on the pseudo-elements. Custom properties inherit into
	   ::before/::after, so the hover block further down can keep the same shape
	   it has always had — one rule on .btn.v1 — and the transform and opacity
	   transitions here still animate when those values change. */
	&.v1 {
		--btn-v1-hvr-frm-ins: 0rem;
		--btn-v1-hvr-frm-x: var(--btn-hvr-frm-trv);
		--btn-v1-hvr-frm-o: 0;

		/* Each sash starts outside the button and slides in past the jamb, so
		   the box clips them — otherwise a 3px line sweeps across whatever sits
		   next to the button for the length of the transition. Nothing inside a
		   .btn.v1 comes near the edge (the icon is a 1.22rem box inside 2rem of
		   padding), so there is nothing else here for this to clip. */
		overflow: hidden;

		/* Held transparent, not dropped: .btn.v1 also lands on real <a> and
		   <button> elements, and without it those fall back to the UA focus ring
		   drawn on top of the frame. Same declaration the outline build shipped. */
		outline: var(--btn-v1-bdr-w) var(--btn-v1-bdr-stl) transparent;
		outline-offset: calc(-1 * var(--btn-v1-bdr-w));

		&::before,
		&::after {
			content: "";
			position: absolute;
			inset: var(--btn-v1-hvr-frm-ins);
			/* Longhand, not the `border` shorthand: if --btn-pry-txt ever fails to
			   resolve, an invalid shorthand takes width and style down with it and
			   the frame disappears. Split, only the colour falls back — to
			   currentColor, which on a v1 button is the button's own ink. */
			border-width: var(--btn-v1-bdr-w);
			border-style: var(--btn-v1-bdr-stl);
			border-color: var(--btn-pry-txt);
			/* .btn.v1 is square by design (--btn-v1-bdr-rds is 0), but the class
			   also rides on the podcast system's round .play-btn / .wf-play, where
			   a square frame inside a circle would be obviously wrong. An outline
			   followed the radius for free; a bordered box has to be told. */
			border-radius: inherit;
			opacity: var(--btn-v1-hvr-frm-o);
			pointer-events: none;
			transition: transform var(--btn-hvr-frm-sp) var(--btn-hvr-frm-tf) 0s, opacity var(--btn-hvr-frm-fd-sp) linear 0s;
		}

		/* Each pseudo carries a whole frame clipped to its own half, so what
		   travels is a corner bracket — the left jamb with its head and sill
		   stubs — rather than a line. That is what makes it read as a sash.

		   Each half is cut --btn-hvr-frm-lap PAST the centre rather than at
		   it, so the two overlap slightly once they meet. On a button whose width
		   is not a whole number of device pixels, a clip at exactly 50% can round
		   outward on both halves and leave a one-pixel hole in the head and sill
		   where they join. The overlap is only ever visible as that join closing;
		   the outer edges of the frame are clipped at 0 and do not move. */
		&::before {
			clip-path: inset(0 calc(50% - var(--btn-hvr-frm-lap)) 0 0);
			transform: translateX(calc(-1 * var(--btn-v1-hvr-frm-x)));
		}

		&::after {
			clip-path: inset(0 0 0 calc(50% - var(--btn-hvr-frm-lap)));
			transform: translateX(var(--btn-v1-hvr-frm-x));
		}
	}

	/* V2 is V1 run backwards. It WEARS its frame at rest, so the two sashes
	   start closed and opaque and part on hover, sliding out through the jambs
	   — the window opening rather than closing.

	   The frame is drawn by the pseudo-elements, not by the element's own
	   border: a border cannot be split and slid. The real border stays in the
	   box (transparent, see below) purely to hold the geometry, because the V2
	   padding tokens already have its 3px subtracted to make the design's 58px
	   height — removing it would shorten every V2 button by 6px. */
	&.v2 {
		--btn-v2-hvr-frm-x: 0%;
		--btn-v2-hvr-frm-o: 1;
		--btn-v2-frm-clr: var(--btn-sec);

		/* V1 clips its sashes with overflow: hidden, but V2 cannot. Both the
		   inset of an absolutely positioned pseudo-element AND the overflow clip
		   edge resolve against the PADDING box, and V2 still carries its 3px
		   border for geometry — so inset: 0 would draw the frame 3px inside the
		   button (a white ring around it), and overflow: hidden would then clip
		   away any attempt to pull it back out.

		   clip-path resolves against the BORDER box instead, so it clips exactly
		   where the button ends, and the pseudo can be pulled out by the border
		   width to sit where the real border does. `round` keeps the clip
		   following the radius, which a bare inset() would square off. */
		clip-path: inset(0 round var(--btn-v2-bdr-rds));

		&::before,
		&::after {
			content: "";
			position: absolute;
			inset: calc(-1 * var(--btn-v2-bdr-w));
			border-width: var(--btn-v2-bdr-w);
			border-style: var(--btn-v2-bdr-stl);
			border-color: var(--btn-v2-frm-clr);
			border-radius: inherit;
			opacity: var(--btn-v2-hvr-frm-o);
			pointer-events: none;
			transition: transform var(--btn-hvr-frm-sp) var(--btn-hvr-frm-tf) 0s, opacity var(--btn-hvr-frm-fd-sp) linear 0s;
		}

		&::before {
			clip-path: inset(0 calc(50% - var(--btn-hvr-frm-lap)) 0 0);
			transform: translateX(calc(-1 * var(--btn-v2-hvr-frm-x)));
		}

		&::after {
			clip-path: inset(0 0 0 calc(50% - var(--btn-hvr-frm-lap)));
			transform: translateX(var(--btn-v2-hvr-frm-x));
		}
	}
}

/* The sashes carry the frame colour, so they have to reproduce what
   theme-structure.css resolves onto the real border — including its one
   special case, a dark island nested inside a light section, where V2 takes
   the cross-palette tone rather than the island's own --btn-sec. */
[data-colors$="-light"] [data-colors$="-dark"] .btn.v2 {
	--btn-v2-frm-clr: var(--btn-bg-clr-dk-alt);
}

/* The real border is now geometry only — the sashes paint every visible
   state, including at rest, so leaving it inked would show a border the
   sashes had already slid away from. Four classes because it has to clear
   the whole ladder in theme-structure.css, which loads later: `.btn.v2`
   (0,2,0), `[data-colors] .btn.v2` (0,3,0), the nested-island rule at
   (0,4,0), and the hover block at (0,4,1). */
.btn.v2.v2.v2.v2 {
	border-color: transparent;
}

/* The stroke colour is --btn-pry-txt (#1e2329 ink) on every palette. Flush to
   the button edge that reads as a border on a light section, but on a dark one
   the ink is close enough to the background (#000 / #3b4046) that the stroke
   disappears into it and the yellow just looks 3px smaller. Sinking it one
   stroke width further in leaves a ring of yellow OUTSIDE the ink, so it reads
   as an inner window frame. Light palettes are byte-for-byte unchanged.

   The second rule restores the flush stroke for a light island nested inside a
   dark section (ServicesV12's primary-light cards), matching the one-level
   re-nesting theme-structure.css already handles for .btn.v2. */
[data-colors$="-dark"] .btn.v1 {
	--btn-v1-hvr-frm-ins: var(--btn-v1-bdr-w);
}

[data-colors$="-dark"] [data-colors$="-light"] .btn.v1 {
	--btn-v1-hvr-frm-ins: 0rem;
}

/* Design: V2 buttons carry a solid surface fill instead of the framework's
   transparent fill (white on light palettes, the dark surface on dark ones),
   so they stay opaque over photos. --background is palette-contextual, so every
   data-colors island resolves its own fill; the hover rules out-specify this
   and still repaint the yellow hover fill. Doubled .v2 beats the transparent
   fill in theme-structure.css, which loads later. */
.btn.v2.v2 {
	background-color: var(--background);
}

/* Short/small buttons in the design keep the FULL 32px horizontal padding
   (only vertical tightens). theme-structure.css re-declares the multipliers on
   .btn.vN.sml, so the override must sit on the element at higher specificity. */
.btn.v1.sml.sml {
	--btn-v1-pd-h-mtp: 1;
}

.btn.v2.sml.sml {
	--btn-v2-pd-h-mtp: 1;
}

@media (hover: hover) and (pointer: fine) {

	[data-colors] {

		&:is(a, button):is(:hover, :focus-visible) .btn.v1,
		:is(a, button):is(:hover, :focus-visible) .btn.v1,
		.btn.v1:is(:hover, :focus-visible) {
			--btn-v1-hvr-frm-x: 0%;
			--btn-v1-hvr-frm-o: 1;
		}

		/* V2 opens: the sashes travel OUT and fade. The old border-color
		   override here is gone with them — theme-structure.css repainting the
		   real border with the hover fill no longer matters now that the real
		   border is transparent in every state. */
		&:is(a, button):is(:hover, :focus-visible) .btn.v2,
		:is(a, button):is(:hover, :focus-visible) .btn.v2,
		.btn.v2:is(:hover, :focus-visible) {
			--btn-v2-hvr-frm-x: var(--btn-hvr-frm-trv);
			--btn-v2-hvr-frm-o: 0;
		}

	}

}


/* -- Button arrow: the mark travels through its own window ------------------- */
/* From the designer's prototype (Figma 12327-4932 -> 12327-4938). The icon
   holds two copies of the window mark; on hover the pair slides one full mark
   to the right, so one leaves through the right edge as the other arrives from
   the left. Purely additive — it touches only the icon, never the sash frames.

   Doubled class because global.css sets `overflow: visible` on every svg at
   (0,1,2) and this has to clear it. The clip is on the icon rather than on
   .btn on purpose: <ButtonIcon /> is rendered in 148 templates, plenty of them
   outside a button, and every one of those needs the trailing copy hidden. */
.icn.btn-arw {
	overflow: hidden;
}

.btn-arw-trk {
	transition: transform var(--btn-arw-sp) var(--btn-arw-tf) 0s;
}

/* The trailing copy is parked exactly one travel-length to the left, driven by
   the same token as the travel — so the loop stays registered whatever the
   travel is set to, and the hover end state lands pixel-identical to the rest
   state. (The comp spaces the copies 14.6 apart while translating 15, which
   leaves its hover state a hair right of its initial one.) */
.btn-arw-nxt {
	transform: translateX(calc(-1 * var(--btn-arw-trv)));
}

@media (hover: hover) and (pointer: fine) {

	/* Scoped to arrows inside a .btn, so the same icon used as standalone card
	   furniture (ServiceItem's circle, ServicesV12) stays exactly as it is. */
	:is(a, button):is(:hover, :focus-visible) .btn .btn-arw-trk,
	.btn:is(:hover, :focus-visible) .btn-arw-trk {
		transform: translateX(var(--btn-arw-trv));
	}

}


/* -- Content list bullets ---------------------------------------------------- */
/* Figma List/bullet: the marker is the Castle window mark — a narrow pane, a
   gap, then a wide pane, all full-height. It is drawn as a mask on a single
   ::before so one background-color paints the whole mark; that keeps the
   existing `.bg-bx.alt-bg ul li::before` recolor in content.css working, which
   a two-element (::before + ::after) build would only half-repaint.
   currentColor lets each palette island resolve its own text color, matching
   the design's unbound black-on-light fill. */
.cnt-stl :is(ul):not(.el-tab-box) > li {
	padding-left: var(--lst-blt-ind);
}

.cnt-stl :is(ul):not(.el-tab-box) > li::before {
	content: "";
	position: absolute;
	left: 0;
	/* .1em is the li's own padding-top from content.css; the rest centers the
	   mark on the first line box the way the design centers 16px in 24px. */
	top: calc(.1em + (var(--fnt-cnt-lh) * 1em - var(--lst-blt-h)) / 2);
	width: var(--lst-blt-w);
	height: var(--lst-blt-h);
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14.597 16'%3E%3Cpath d='M0 0h2.988v16H0zM4.783 0h9.814v16H4.783z'/%3E%3C/svg%3E") no-repeat center / contain;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14.597 16'%3E%3Cpath d='M0 0h2.988v16H0zM4.783 0h9.814v16H4.783z'/%3E%3C/svg%3E") no-repeat center / contain;
}