/**
 * Design system components as plain CSS.
 *
 * In the mockups these are React components from _ds_bundle.js with inline
 * styles and hover kept in useState. Here each one is a .pw-* class with BEM
 * modifiers; hover becomes :hover and :focus-visible. Every value comes from
 * the bundle (style objects, SIZES, palette()) and points at a token where
 * the bundle does. Prop → class map and HTML examples: docs/komponenty.md.
 *
 * Loads on every page, before core.css.
 *
 * Several components keep their colors in private custom properties
 * (--_bg, --_fg, --_line and their -hover pairs). Modifiers only swap those
 * variables, so one :hover rule and one :disabled rule serve every variant.
 * They are not design tokens: they live on the component, never on :root.
 *
 * @package plantworld
 */

/* ── Icon block (stage B) ───────────────────────────────── */
/* The <span> of an Icon block takes the size of its icon, without the line
   box around an inline <svg>. Zero specificity: the place the icon sits in
   (.pw-step__icon, .pw-feature-card__icon …) sets its own display. */
:where(.wp-block-plantworld-icon) {
	display: inline-flex;
}

/* ── Button ─────────────────────────────────────────────── */
/* <a> or <button>. Default = primary, size md, tone light.
 *
 * In the block editor a Button block is a wrapper (.wp-block-button with the
 * style and size classes) around the editable label (.wp-block-button__link);
 * on the page the render filter (inc/blocks.php) prints <a class="pw-btn …">.
 * Each rule names both, so the editor shows the page's button from the same
 * values. The editor selectors carry .wp-block-button on top of the style
 * class to beat Neve's `.is-style-secondary .wp-block-button__link`
 * (0-2-0), which matches our "secondary" style too. Sizes are limited to
 * .pw-btn, so the wrapper in the editor (which has the size class) never
 * gets the button's padding; the specificity on the page stays 0-1-0. */
.pw-btn,
.wp-block-button:not(.is-style-textlink) > .wp-block-button__link {
	--_bg: var(--action-on-light);
	--_fg: var(--action-fill-text-on-light);
	--_line: var(--action-on-light);
	--_bg-hover: var(--action-on-light-hover);
	--_fg-hover: var(--action-fill-text-on-light);
	--_line-hover: var(--action-on-light-hover);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 14px 28px;
	border: 1px solid var(--_line);
	border-radius: 0;
	box-shadow: none;
	background: var(--_bg);
	color: var(--_fg);
	font-family: var(--font-body);
	font-weight: var(--fw-semibold);
	font-size: 13px;
	letter-spacing: 0.08em;
	line-height: 1;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	transition: var(--transition-color);
}

/* On the page a button inside a Buttons block is a flex item, so its
   inline-flex computes to flex. In the editor the label sits one level
   deeper, inside the block's wrapper (the flex item): same box. Not where
   the Buttons block is a plain box (.pw-feature-card__foot). */
.wp-block-buttons:not(.pw-feature-card__foot) > .wp-block-button > .wp-block-button__link {
	display: flex;
}

.pw-btn--sm:where(.pw-btn),
.wp-block-button.pw-btn--sm > .wp-block-button__link {
	gap: 8px;
	padding: 9px 18px;
	font-size: 12px;
}

.pw-btn--lg:where(.pw-btn),
.wp-block-button.pw-btn--lg > .wp-block-button__link {
	gap: 12px;
	padding: 19px 40px;
	font-size: 14px;
	letter-spacing: 0.09em;
}

.pw-btn--secondary,
.wp-block-button.is-style-secondary > .wp-block-button__link {
	--_bg: transparent;
	--_fg: var(--action-on-light);
	--_line: var(--action-on-light);
	--_bg-hover: var(--action-on-light);
	--_fg-hover: var(--action-fill-text-on-light);
	--_line-hover: var(--action-on-light);
}

/* Ghost keeps the vertical padding of its size and drops the horizontal one;
   on hover a 1px rule appears under it. Declared after the sizes on purpose. */
.pw-btn--ghost,
.wp-block-button.is-style-ghost > .wp-block-button__link {
	--_bg: transparent;
	--_fg: var(--action-on-light);
	--_line: transparent;
	--_bg-hover: transparent;
	--_fg-hover: var(--action-on-light-hover);
	--_line-hover: transparent;
	padding-right: 0;
	padding-left: 0;
}

/* Tone dark: on ink. The fill is the bright green, so the label is ink, never white. */
.pw-btn--on-dark,
.wp-block-button.is-style-on-dark > .wp-block-button__link {
	--_bg: var(--action-on-dark);
	--_fg: var(--action-fill-text-on-dark);
	--_line: var(--action-on-dark);
	--_bg-hover: var(--action-on-dark-hover);
	--_fg-hover: var(--action-fill-text-on-dark);
	--_line-hover: var(--action-on-dark-hover);
}

.pw-btn--on-dark.pw-btn--secondary,
.wp-block-button.is-style-secondary-dark > .wp-block-button__link {
	--_bg: transparent;
	--_fg: var(--action-on-dark);
	--_line: var(--action-on-dark);
	--_bg-hover: var(--action-on-dark);
	--_fg-hover: var(--action-fill-text-on-dark);
	--_line-hover: var(--action-on-dark);
}

.pw-btn--on-dark.pw-btn--ghost {
	--_bg: transparent;
	--_fg: var(--action-on-dark);
	--_line: transparent;
	--_bg-hover: transparent;
	--_fg-hover: var(--action-on-dark-hover);
	--_line-hover: transparent;
}

/* Tone photo: on a photo under a scrim. The fill is the on-light green with a
   white label (5.5:1); the bright #39BB47 never sits under white text. */
.pw-btn--photo,
.wp-block-button.is-style-photo > .wp-block-button__link {
	--_bg: var(--action-fill-on-light);
	--_fg: var(--pw-white);
	--_line: var(--action-fill-on-light);
	--_bg-hover: var(--action-fill-on-light-hover);
	--_fg-hover: var(--pw-white);
	--_line-hover: var(--action-fill-on-light-hover);
}

.pw-btn--photo.pw-btn--secondary,
.wp-block-button.is-style-secondary-photo > .wp-block-button__link {
	--_bg: transparent;
	--_fg: var(--pw-white);
	--_line: var(--pw-white);
	--_bg-hover: var(--pw-white);
	--_fg-hover: var(--pw-ink);
	--_line-hover: var(--pw-white);
}

.pw-btn--photo.pw-btn--ghost {
	--_bg: transparent;
	--_fg: var(--pw-white);
	--_line: transparent;
	--_bg-hover: transparent;
	--_fg-hover: var(--pw-white);
	--_line-hover: transparent;
}

.pw-btn--full,
.wp-block-button.pw-btn--full > .wp-block-button__link {
	display: flex;
	width: 100%;
}

/* Neve gives a focused link its secondary accent (a:focus, 0-1-1). Keep the
   button's own label color until :hover or :focus-visible take over. */
.pw-btn:focus {
	color: var(--_fg);
}

.pw-btn:hover,
.pw-btn:focus-visible,
.wp-block-button:not(.is-style-textlink) > .wp-block-button__link:hover {
	border-color: var(--_line-hover);
	background: var(--_bg-hover);
	color: var(--_fg-hover);
}

.pw-btn--ghost:hover,
.pw-btn--ghost:focus-visible,
.wp-block-button.is-style-ghost > .wp-block-button__link:hover {
	border-bottom-color: currentColor;
}

/* Disabled: no hover change, as in the React component. Last, so it also
   wins over the hover rules above and over Neve's button:hover. */
.pw-btn:disabled,
.pw-btn[aria-disabled="true"] {
	border-color: var(--_line);
	background: var(--_bg);
	color: var(--_fg);
	opacity: 0.4;
	cursor: not-allowed;
}

/* ── IconButton ─────────────────────────────────────────── */
/* Square, 48px by default. Needs aria-label (and title) on the element. */
.pw-iconbtn {
	--_bg: transparent;
	--_fg: var(--action-on-light);
	--_line: var(--hairline);
	--_bg-hover: var(--action-on-light);
	--_fg-hover: var(--action-fill-text-on-light);
	--_line-hover: var(--action-on-light);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	padding: 0;
	border: 1px solid var(--_line);
	border-radius: 0;
	box-shadow: none;
	background: var(--_bg);
	color: var(--_fg);
	text-decoration: none;
	cursor: pointer;
	transition: var(--transition-color);
}

.pw-iconbtn--44 {
	width: 44px;
	height: 44px;
}

.pw-iconbtn--solid {
	--_bg: var(--action-on-light);
	--_fg: var(--action-fill-text-on-light);
	--_line: var(--action-on-light);
	--_bg-hover: var(--action-on-light-hover);
	--_line-hover: var(--action-on-light-hover);
}

.pw-iconbtn--bare {
	--_line: transparent;
	--_bg-hover: transparent;
	--_fg-hover: var(--action-on-light-hover);
	--_line-hover: transparent;
}

.pw-iconbtn--on-dark {
	--_fg: var(--action-on-dark);
	--_line: var(--hairline-on-dark);
	--_bg-hover: var(--action-on-dark);
	--_fg-hover: var(--action-fill-text-on-dark);
	--_line-hover: var(--action-on-dark);
}

.pw-iconbtn--on-dark.pw-iconbtn--solid {
	--_bg: var(--action-on-dark);
	--_fg: var(--action-fill-text-on-dark);
	--_line: var(--action-on-dark);
	--_bg-hover: var(--action-on-dark-hover);
	--_line-hover: var(--action-on-dark-hover);
}

.pw-iconbtn--on-dark.pw-iconbtn--bare {
	--_line: transparent;
	--_bg-hover: transparent;
	--_fg-hover: var(--action-on-dark-hover);
	--_line-hover: transparent;
}

.pw-iconbtn:focus {
	color: var(--_fg);
}

.pw-iconbtn:hover,
.pw-iconbtn:focus-visible {
	border-color: var(--_line-hover);
	background: var(--_bg-hover);
	color: var(--_fg-hover);
}

.pw-iconbtn:disabled,
.pw-iconbtn[aria-disabled="true"] {
	border-color: var(--_line);
	background: var(--_bg);
	color: var(--_fg);
	opacity: 0.4;
	cursor: not-allowed;
}

/* ── TextLink ───────────────────────────────────────────── */
/* Named .pw-textlink because .pw-link already exists in components.css
   (a plain colored link). A 1px rule under the text, in the link color. */
.pw-textlink,
.wp-block-button.is-style-textlink > .wp-block-button__link {
	--_fg: var(--action-on-light);
	--_fg-hover: var(--action-on-light-hover);
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding-bottom: 1px;
	border-bottom: 1px solid currentColor;
	color: var(--_fg);
	font-family: var(--font-body);
	font-weight: var(--fw-medium);
	text-decoration: none;
	transition: var(--transition-color);
}

/* The TextLink as a Button block in the editor: without the paint and padding of WordPress's default button (theme.json, block library). */
.wp-block-button.is-style-textlink > .wp-block-button__link {
	padding: 0 0 1px;
	border-radius: 0;
	background: transparent;
}

/* underline="hover": the rule shows only on hover. */
.pw-textlink--hover {
	border-bottom-color: transparent;
}

.pw-textlink--on-dark {
	--_fg: var(--action-on-dark);
	--_fg-hover: var(--action-on-dark-hover);
}

.pw-textlink:focus {
	color: var(--_fg);
}

.pw-textlink:hover,
.pw-textlink:focus-visible,
.wp-block-button.is-style-textlink > .wp-block-button__link:hover {
	color: var(--_fg-hover);
}

.pw-textlink--hover:hover,
.pw-textlink--hover:focus-visible {
	border-bottom-color: currentColor;
}

/* ── Breadcrumb ─────────────────────────────────────────── */
/* <nav aria-label="Okruszki">; the last item is a span with aria-current="page". */
.pw-breadcrumb {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-3);
	font-family: var(--font-body);
	font-weight: var(--fw-semibold);
	font-size: var(--type-meta-size);
	letter-spacing: var(--type-meta-ls);
	text-transform: uppercase;
}

/* The slash is decorative (aria-hidden); stone is allowed here as a line-like glyph, as in the bundle. */
.pw-breadcrumb__sep {
	color: var(--hairline);
}

.pw-breadcrumb__current {
	color: var(--text-meta);
}

.pw-breadcrumb__link {
	border-bottom: 1px solid transparent;
	color: var(--action-on-light);
	text-decoration: none;
	transition: var(--transition-color);
}

.pw-breadcrumb__link:focus {
	color: var(--action-on-light);
}

.pw-breadcrumb__link:hover,
.pw-breadcrumb__link:focus-visible {
	border-bottom-color: currentColor;
	color: var(--action-on-light-hover);
}

.pw-breadcrumb--on-dark .pw-breadcrumb__sep {
	color: var(--hairline-on-dark);
}

.pw-breadcrumb--on-dark .pw-breadcrumb__current {
	color: var(--text-on-dark-muted);
}

.pw-breadcrumb--on-dark .pw-breadcrumb__link,
.pw-breadcrumb--on-dark .pw-breadcrumb__link:focus {
	color: var(--action-on-dark);
}

.pw-breadcrumb--on-dark .pw-breadcrumb__link:hover,
.pw-breadcrumb--on-dark .pw-breadcrumb__link:focus-visible {
	color: var(--action-on-dark-hover);
}

/* ── Accordion ──────────────────────────────────────────── */
/*
 * Native <details>/<summary>, so it works as core/details (HANDOFF section 7):
 * a group .pw-accordion holding details.pw-accordion__item blocks. One open
 * at a time = the same name="" on every <details>; the first one starts open.
 * The summary holds plain question text only: inline tags (<strong>, <em>)
 * would become extra grid items and break the row.
 * The plus is two 1.5px bars drawn by ::before and ::after, stacked in one
 * grid cell; opening rotates the vertical bar flat, so the plus turns into a
 * minus. At rest the bars use --border-field, not --pw-stone (HANDOFF
 * section 11: stone is about 2:1 against paper).
 */
.pw-accordion {
	border-top: 1px solid var(--hairline);
}

.pw-accordion__item {
	border-bottom: 1px solid var(--hairline);
}

.pw-accordion__item[open] {
	padding-bottom: var(--space-6);
}

.pw-accordion__item > summary {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 16px;
	column-gap: var(--space-5);
	align-items: baseline;
	padding: var(--space-5) 0;
	color: var(--text-heading);
	font-family: var(--font-display);
	font-weight: var(--fw-regular);
	font-size: 22px;
	line-height: 1.3;
	list-style: none;
	cursor: pointer;
	transition: var(--transition-color);
}

.pw-accordion__item > summary::-webkit-details-marker {
	display: none;
}

.pw-accordion__item > summary::before,
.pw-accordion__item > summary::after {
	content: "";
	grid-area: 1 / 2;
	width: 16px;
	height: 16px;
	margin-top: 4px;
	background: linear-gradient(currentColor, currentColor) 0 7px / 16px 1.5px no-repeat;
	color: var(--border-field);
	transition: var(--transition-color), transform var(--dur) var(--ease);
}

.pw-accordion__item > summary::after {
	transform: rotate(90deg);
}

.pw-accordion__item[open] > summary::before,
.pw-accordion__item[open] > summary::after {
	color: var(--action-on-light);
}

.pw-accordion__item[open] > summary::after {
	transform: rotate(0deg);
}

/* Hover turns a closed question green; an open one keeps its heading color. */
.pw-accordion__item:not([open]) > summary:hover,
.pw-accordion__item:not([open]) > summary:focus-visible,
.pw-accordion__item > summary:hover::before,
.pw-accordion__item > summary:hover::after,
.pw-accordion__item > summary:focus-visible::before,
.pw-accordion__item > summary:focus-visible::after {
	color: var(--action-on-light-hover);
}

/* The answer: core/details puts paragraphs straight into <details>. */
.pw-accordion__item > :not(summary) {
	max-width: 640px;
	margin: 0;
	color: var(--text-body);
	font-family: var(--font-body);
	font-size: var(--type-body-size);
	line-height: var(--type-body-lh);
}

/* On dark the plus rests in --border-field-on-dark, the dark twin of the light fix. */
.pw-accordion--on-dark {
	border-top-color: var(--hairline-on-dark);
}

.pw-accordion--on-dark .pw-accordion__item {
	border-bottom-color: var(--hairline-on-dark);
}

.pw-accordion--on-dark .pw-accordion__item > summary {
	color: var(--text-on-dark);
}

.pw-accordion--on-dark .pw-accordion__item > summary::before,
.pw-accordion--on-dark .pw-accordion__item > summary::after {
	color: var(--border-field-on-dark);
}

.pw-accordion--on-dark .pw-accordion__item[open] > summary::before,
.pw-accordion--on-dark .pw-accordion__item[open] > summary::after {
	color: var(--action-on-dark);
}

.pw-accordion--on-dark .pw-accordion__item:not([open]) > summary:hover,
.pw-accordion--on-dark .pw-accordion__item:not([open]) > summary:focus-visible,
.pw-accordion--on-dark .pw-accordion__item > summary:hover::before,
.pw-accordion--on-dark .pw-accordion__item > summary:hover::after,
.pw-accordion--on-dark .pw-accordion__item > summary:focus-visible::before,
.pw-accordion--on-dark .pw-accordion__item > summary:focus-visible::after {
	color: var(--action-on-dark-hover);
}

.pw-accordion--on-dark .pw-accordion__item > :not(summary) {
	color: var(--text-on-dark-muted);
}

/* ── Form field: Input, Textarea, Select ────────────────── */
/*
 * The bundle's FieldShell maps onto .pw-field from components.css (core.css):
 * a column with an 8px gap, which replaces the label's margin-bottom and the
 * message's margin-top. Label, required star and hint use --text-lead-muted
 * (HANDOFF section 10).
 */
.pw-field__label {
	display: block;
	margin: 0;
	color: var(--text-lead-muted);
	font-family: var(--font-body);
	font-weight: var(--fw-semibold);
	font-size: var(--type-meta-size);
	letter-spacing: var(--type-meta-ls);
	text-transform: uppercase;
}

.pw-field__req {
	color: var(--text-lead-muted);
}

.pw-field__msg {
	margin: 0;
	color: var(--text-lead-muted);
	font-size: var(--type-small-size);
	line-height: 1.5;
}

.pw-field__msg--error {
	color: var(--pw-error);
}

/*
 * The control (input, textarea; .pw-select adds the caret).
 * Inside a <form> Neve paints fields with `form input:read-write` (0-1-2),
 * which beats one class. It paints them through --formfield* variables, so
 * the control sets those variables and uses them itself: Neve's rule then
 * draws exactly the same field. Modifiers and states change the variables.
 */
.pw-input {
	--formfieldbgcolor: var(--surface-field);
	--formfieldcolor: var(--text-body);
	--formfieldbordercolor: var(--border-field);
	--formfieldborderwidth: 1px;
	--formfieldborderradius: 0;
	--formfieldpadding: 14px 16px;
	--formfieldfontsize: 15px;
	--formfieldfontweight: var(--fw-regular);
	--formfieldlineheight: 1.5;
	--formfieldletterspacing: normal;
	--formfieldtexttransform: none;
	display: block;
	width: 100%;
	padding: var(--formfieldpadding);
	border: var(--formfieldborderwidth) solid var(--formfieldbordercolor);
	border-radius: 0;
	box-shadow: none;
	outline: none;
	background: var(--formfieldbgcolor);
	color: var(--formfieldcolor);
	font-family: var(--font-body);
	font-weight: var(--formfieldfontweight);
	font-size: var(--formfieldfontsize);
	line-height: var(--formfieldlineheight);
	letter-spacing: var(--formfieldletterspacing);
	text-transform: var(--formfieldtexttransform);
	transition: var(--transition-color);
}

textarea.pw-input {
	resize: vertical;
}

.pw-input[aria-invalid="true"] {
	--formfieldbordercolor: var(--pw-error);
}

/*
 * Focus: the border color of the bundle plus the 2px ring every other
 * control has (audit A-32: the 1px border alone was hard to see). Only on
 * focus, so the field at rest looks as in the bundle. The selector matches
 * the specificity of Neve's input:read-write:focus (0-2-1), which would add
 * a glow and its own border color, and loads later.
 */
:is(input, select, textarea).pw-input:focus,
:is(input, select, textarea).pw-input:focus-visible {
	--formfieldbordercolor: var(--focus-ring-on-light);
	box-shadow: none;
	outline: 2px solid var(--focus-ring-on-light);
	outline-offset: 2px;
}

.pw-input:disabled {
	opacity: 0.45;
}

/*
 * Select: no native arrow, a 20px chevron 14px from the right edge, room for
 * it on the right. Neve forces select { padding-right: 20px } with an important flag, so the
 * 44px from the bundle cannot apply without one of our own: long option text
 * may run under the chevron. Background longhands are spelled out because
 * Neve's `form select { background: … }` shorthand would set its own size.
 * Chevron color = --border-field (#8A8171, 3.5:1 on paper, WCAG 1.4.11), as
 * the Accordion plus; the bundle had --pw-stone (about 2:1). It stays a
 * data: image, not the sprite: a CSS background cannot show a <symbol> of
 * an SVG sprite, and the select of WPForms (step 10) has no room for an
 * <svg> element. A data: URL cannot read a custom property, hence the hex.
 */
.pw-select {
	padding-right: 44px;
	background-color: var(--formfieldbgcolor);
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%238A8171' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>");
	background-position: right 14px center;
	background-repeat: no-repeat;
	background-size: 20px 20px;
	-webkit-appearance: none;
	appearance: none;
	cursor: pointer;
}

.pw-select:disabled {
	cursor: not-allowed;
}

/* Tone dark: on the wrapper, so label, control and message switch together. */
.pw-field--on-dark .pw-field__label,
.pw-field--on-dark .pw-field__req,
.pw-field--on-dark .pw-field__msg {
	color: var(--text-on-dark-muted);
}

.pw-field--on-dark .pw-field__msg--error {
	color: var(--pw-error-on-dark);
}

.pw-field--on-dark .pw-input {
	--formfieldbgcolor: var(--surface-field-on-dark);
	--formfieldcolor: var(--text-on-dark);
	--formfieldbordercolor: var(--border-field-on-dark);
}

.pw-field--on-dark .pw-input[aria-invalid="true"] {
	--formfieldbordercolor: var(--pw-error-on-dark);
}

.pw-field--on-dark :is(input, select, textarea).pw-input:focus,
.pw-field--on-dark :is(input, select, textarea).pw-input:focus-visible {
	--formfieldbordercolor: var(--focus-ring-on-dark);
	outline-color: var(--focus-ring-on-dark);
}

/* ── Checkbox, Radio, Switch ────────────────────────────── */
/*
 * A <label> wraps a visually hidden native input and a drawn box. Two small
 * additions to the bundle, both invisible at rest:
 * - the label is position: relative, so the hidden input sits inside it and
 *   focusing it does not scroll the page to some far positioned ancestor;
 * - keyboard focus draws the system ring around the box. In the bundle the
 *   ring lands on the 1px invisible input, so focus is not visible
 *   (WCAG 2.4.7).
 */
.pw-checkbox,
.pw-radio,
.pw-switch {
	position: relative;
	gap: var(--space-3);
	color: var(--text-body);
	font-family: var(--font-body);
	font-size: var(--type-small-size);
	cursor: pointer;
}

.pw-checkbox,
.pw-radio {
	display: flex;
	align-items: flex-start;
	line-height: 1.6;
}

.pw-switch {
	display: inline-flex;
	align-items: center;
}

.pw-checkbox__input,
.pw-radio__input,
.pw-switch__input {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: 0;
	opacity: 0;
}

.pw-checkbox__box,
.pw-radio__box {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	margin-top: 1px;
	border: 1px solid var(--border-field);
	background: transparent;
	transition: var(--transition-color);
}

.pw-checkbox__input:focus-visible + .pw-checkbox__box,
.pw-radio__input:focus-visible + .pw-radio__box,
.pw-switch__input:focus-visible + .pw-switch__track {
	outline: 2px solid var(--focus-ring-on-light);
	outline-offset: 2px;
}

/* Checkbox: the tick is the sprite icon "check" with .pw-checkbox__tick ([ikona … klasa=pw-checkbox__tick]), shown when checked. */
.pw-checkbox__box {
	color: var(--action-fill-text-on-light);
}

.pw-checkbox__tick {
	display: block;
	visibility: hidden;
}

.pw-checkbox__input:checked + .pw-checkbox__box {
	border-color: var(--action-on-light);
	background: var(--action-on-light);
}

.pw-checkbox__input:checked + .pw-checkbox__box .pw-checkbox__tick {
	visibility: visible;
}

/* Radio: ring and dot are round, one of the two allowed exceptions to --radius: 0. */
.pw-radio__box {
	border-radius: 50%;
}

.pw-radio__box::after {
	content: "";
	display: none;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--action-on-light);
}

.pw-radio__input:checked + .pw-radio__box {
	border-color: var(--action-on-light);
}

.pw-radio__input:checked + .pw-radio__box::after {
	display: block;
}

/* Switch: <input type="checkbox" role="switch">. The thumb moves with
   transform instead of `left` (HANDOFF section 12: animate transform and
   opacity only); the end position is the same 24px from the left. */
.pw-switch__track {
	position: relative;
	flex: 0 0 auto;
	width: 44px;
	height: 20px;
	border: 1px solid var(--hairline);
	background: transparent;
	transition: var(--transition-color);
}

.pw-switch__track::after {
	content: "";
	position: absolute;
	top: 2px;
	left: 2px;
	width: 16px;
	height: 14px;
	background: var(--hairline);
	transition: transform var(--dur) var(--ease), background-color var(--dur) var(--ease);
}

.pw-switch__input:checked + .pw-switch__track {
	border-color: var(--action-on-light);
}

.pw-switch__input:checked + .pw-switch__track::after {
	background: var(--action-on-light);
	transform: translateX(22px);
}

.pw-checkbox:has(:disabled),
.pw-radio:has(:disabled),
.pw-switch:has(:disabled) {
	opacity: 0.45;
	cursor: not-allowed;
}

/* Tone dark */
.pw-checkbox--on-dark,
.pw-radio--on-dark,
.pw-switch--on-dark {
	color: var(--text-on-dark);
}

.pw-checkbox--on-dark .pw-checkbox__box,
.pw-radio--on-dark .pw-radio__box {
	border-color: var(--border-field-on-dark);
}

.pw-checkbox--on-dark .pw-checkbox__box {
	color: var(--action-fill-text-on-dark);
}

.pw-checkbox--on-dark .pw-checkbox__input:checked + .pw-checkbox__box {
	border-color: var(--action-on-dark);
	background: var(--action-on-dark);
}

.pw-radio--on-dark .pw-radio__box::after {
	background: var(--action-on-dark);
}

.pw-radio--on-dark .pw-radio__input:checked + .pw-radio__box {
	border-color: var(--action-on-dark);
}

.pw-switch--on-dark .pw-switch__track {
	border-color: var(--hairline-on-dark);
}

.pw-switch--on-dark .pw-switch__input:checked + .pw-switch__track {
	border-color: var(--action-on-dark);
}

.pw-switch--on-dark .pw-switch__input:checked + .pw-switch__track::after {
	background: var(--action-on-dark);
}

.pw-checkbox--on-dark .pw-checkbox__input:focus-visible + .pw-checkbox__box,
.pw-radio--on-dark .pw-radio__input:focus-visible + .pw-radio__box,
.pw-switch--on-dark .pw-switch__input:focus-visible + .pw-switch__track {
	outline-color: var(--focus-ring-on-dark);
}

/* ── Tag ────────────────────────────────────────────────── */
/* <a> or <button aria-pressed>. Selected: aria-pressed="true",
   aria-current="page" or .pw-tag--selected. */
.pw-tag {
	--_fg: var(--text-body);
	--_line: var(--hairline);
	--_fg-hover: var(--action-on-light-hover);
	--_sel: var(--action-on-light);
	--_sel-fg: var(--action-fill-text-on-light);
	display: inline-flex;
	align-items: center;
	padding: 9px 16px;
	border: 1px solid var(--_line);
	border-radius: 0;
	box-shadow: none;
	background: transparent;
	color: var(--_fg);
	font-family: var(--font-body);
	font-weight: var(--fw-medium);
	font-size: 13px;
	letter-spacing: 0.02em;
	line-height: 1;
	text-decoration: none;
	cursor: pointer;
	transition: var(--transition-color);
}

.pw-tag--on-dark {
	--_fg: var(--text-on-dark);
	--_line: var(--hairline-on-dark);
	--_fg-hover: var(--action-on-dark-hover);
	--_sel: var(--action-on-dark);
	--_sel-fg: var(--action-fill-text-on-dark);
}

.pw-tag:focus {
	color: var(--_fg);
}

.pw-tag:hover,
.pw-tag:focus-visible {
	border-color: var(--_fg-hover);
	background: transparent;
	color: var(--_fg-hover);
}

.pw-tag:is([aria-pressed="true"], [aria-current="page"], .pw-tag--selected) {
	border-color: var(--_sel);
	background: var(--_sel);
	color: var(--_sel-fg);
}

/* ── Notice ─────────────────────────────────────────────── */
/* role="status" (info, success) or role="alert" (error). */
.pw-notice {
	padding: var(--space-5);
	border: 1px solid var(--hairline);
	border-radius: 0;
	box-shadow: none;
	background: var(--pw-white);
}

.pw-notice--success {
	border-color: var(--action-on-light);
}

.pw-notice--error {
	border-color: var(--pw-error);
}

.pw-notice__title {
	margin: 0 0 var(--space-3);
	color: var(--text-meta);
	font-family: var(--font-body);
	font-weight: var(--fw-semibold);
	font-size: var(--type-meta-size);
	letter-spacing: var(--type-meta-ls);
	text-transform: uppercase;
}

.pw-notice--success .pw-notice__title {
	color: var(--action-on-light);
}

.pw-notice--error .pw-notice__title {
	color: var(--pw-error);
}

.pw-notice__body {
	margin: 0;
	color: var(--text-body);
	font-family: var(--font-body);
	font-size: var(--type-small-size);
	line-height: 1.65;
}

.pw-notice__action {
	margin-top: var(--space-4);
}

.pw-notice--on-dark {
	border-color: var(--hairline-on-dark);
	background: transparent;
}

.pw-notice--on-dark.pw-notice--success {
	border-color: var(--action-on-dark);
}

.pw-notice--on-dark.pw-notice--error {
	border-color: var(--pw-error-on-dark);
}

.pw-notice--on-dark .pw-notice__title {
	color: var(--text-on-dark-muted);
}

.pw-notice--on-dark.pw-notice--success .pw-notice__title {
	color: var(--action-on-dark);
}

.pw-notice--on-dark.pw-notice--error .pw-notice__title {
	color: var(--pw-error-on-dark);
}

.pw-notice--on-dark .pw-notice__body {
	color: var(--text-on-dark);
}

/* ── Rule ───────────────────────────────────────────────── */
/* Plain: <hr class="pw-rule">. With a label: div.pw-rule.pw-rule--label. */
.pw-rule {
	height: 0;
	margin: 0;
	border: 0;
	border-top: 1px solid var(--hairline);
}

.pw-rule--label {
	display: flex;
	align-items: center;
	gap: var(--space-5);
	height: auto;
	border-top: 0;
}

.pw-rule__label {
	flex: 0 0 auto;
	color: var(--text-meta);
	font-family: var(--font-body);
	font-weight: var(--fw-semibold);
	font-size: var(--type-meta-size);
	letter-spacing: var(--type-meta-ls);
	text-transform: uppercase;
}

.pw-rule__line {
	flex: 1;
	border-top: 1px solid var(--hairline);
}

.pw-rule--weak,
.pw-rule--weak .pw-rule__line {
	border-top-color: var(--hairline-weak);
}

/* On dark the weight makes no difference, as in the bundle. */
.pw-rule--on-dark,
.pw-rule--on-dark .pw-rule__line {
	border-top-color: var(--hairline-on-dark);
}

.pw-rule--on-dark .pw-rule__label {
	color: var(--text-on-dark-muted);
}

/* ── Stat ───────────────────────────────────────────────── */
/* Sizes: --sm 40px, default 56px, --lg 72px. The value keeps its token size
   at every width, as in the bundle. */
.pw-stat {
	display: flex;
	flex-direction: column;
}

.pw-stat__value {
	color: var(--text-heading);
	font-family: var(--font-display);
	font-weight: var(--fw-regular);
	font-size: 56px;
	line-height: 1;
	letter-spacing: -0.01em;
}

.pw-stat--sm .pw-stat__value {
	font-size: 40px;
}

.pw-stat--lg .pw-stat__value {
	font-size: 72px;
}

.pw-stat__label {
	margin-top: var(--space-3);
	color: var(--text-meta);
	font-family: var(--font-body);
	font-weight: var(--fw-semibold);
	font-size: var(--type-meta-size);
	letter-spacing: var(--type-meta-ls);
	text-transform: uppercase;
}

.pw-stat__note {
	margin-top: var(--space-2);
	color: var(--text-body);
	font-family: var(--font-body);
	font-size: var(--type-small-size);
	line-height: 1.5;
}

.pw-stat--on-dark .pw-stat__value {
	color: var(--text-on-dark);
}

.pw-stat--on-dark .pw-stat__label,
.pw-stat--on-dark .pw-stat__note {
	color: var(--text-on-dark-muted);
}

/* ── Card ───────────────────────────────────────────────── */
/*
 * <a> (whole card is a link) or <div>. Variants: default "rule" (hairline on
 * top), --bordered, --filled. Media ratio through --media-ratio (default 4 / 3).
 * Left out: the bundle's dark media background #241F19 is not in the palette
 * (HANDOFF section 1) and no mockup uses a dark Card.
 */
.pw-card {
	display: flex;
	flex-direction: column;
	padding: var(--space-5) 0 0;
	border-top: 1px solid var(--hairline);
	border-radius: 0;
	box-shadow: none;
	background: transparent;
	color: inherit;
	text-decoration: none;
	transition: var(--transition-color);
}

.pw-card--bordered {
	padding: var(--space-6);
	border: 1px solid var(--hairline);
}

.pw-card--filled {
	padding: var(--space-6);
	border-top: 0;
	background: var(--surface-alt);
}

.pw-card__media {
	display: block;
	aspect-ratio: var(--media-ratio, 4 / 3);
	margin-bottom: var(--space-5);
	overflow: hidden;
	background: var(--pw-paper-alt);
}

.pw-card__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--dur-slow) var(--ease);
}

a.pw-card:hover .pw-card__media img {
	transform: scale(1.03);
}

.pw-card__eyebrow {
	margin-bottom: var(--space-3);
	color: var(--text-meta);
	font-family: var(--font-body);
	font-weight: var(--fw-semibold);
	font-size: var(--type-meta-size);
	letter-spacing: var(--type-meta-ls);
	text-transform: uppercase;
}

.pw-card__title {
	margin: 0;
	color: var(--text-heading);
	font-family: var(--font-display);
	font-weight: var(--fw-regular);
	font-size: var(--type-h3-size);
	line-height: var(--type-h3-lh);
	transition: var(--transition-color);
}

a.pw-card:hover .pw-card__title {
	color: var(--action-on-light);
}

.pw-card__body {
	margin: var(--space-3) 0 0;
	color: var(--text-body);
	font-family: var(--font-body);
	font-size: var(--type-body-size);
	line-height: var(--type-body-lh);
}

.pw-card__action {
	margin-top: var(--space-5);
}

.pw-card--on-dark {
	border-top-color: var(--hairline-on-dark);
}

.pw-card--on-dark.pw-card--bordered {
	border-color: var(--hairline-on-dark);
}

.pw-card--on-dark.pw-card--filled {
	background: var(--surface-card-dark);
}

.pw-card--on-dark .pw-card__eyebrow,
.pw-card--on-dark .pw-card__body {
	color: var(--text-on-dark-muted);
}

.pw-card--on-dark .pw-card__title {
	color: var(--text-on-dark);
}

a.pw-card--on-dark:hover .pw-card__title {
	color: var(--action-on-dark);
}

/* ── SectionHeading ─────────────────────────────────────── */
/*
 * Named .pw-heading because .pw-section-head already exists in
 * components.css (a different layout: heading 2/3 + note 1/3).
 * Hairline on top by default (--no-rule removes it). Title sizes come from
 * the type tokens and stay the same at every width, as in the bundle.
 */
.pw-heading {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	padding-top: var(--space-5);
	border-top: 1px solid var(--hairline);
	text-align: left;
}

.pw-heading--no-rule {
	padding-top: 0;
	border-top: 0;
}

.pw-heading--center {
	align-items: center;
	text-align: center;
}

.pw-heading__eyebrow {
	margin-bottom: var(--space-4);
	color: var(--text-meta);
	font-family: var(--font-body);
	font-weight: var(--fw-semibold);
	font-size: var(--type-meta-size);
	letter-spacing: var(--type-meta-ls);
	text-transform: uppercase;
}

.pw-heading__title {
	max-width: 640px;
	margin: 0;
	color: var(--text-heading);
	font-family: var(--font-display);
	font-weight: var(--fw-regular);
	font-size: var(--type-h2-size);
	line-height: var(--type-h2-lh);
	letter-spacing: var(--type-h2-ls);
}

/* level="h1" */
.pw-heading--h1 .pw-heading__title {
	font-size: var(--type-h1-size);
	line-height: var(--type-h1-lh);
	letter-spacing: var(--type-h1-ls);
}

.pw-heading__lead {
	max-width: 640px;
	margin: var(--space-5) 0 0;
	color: var(--text-body);
	font-family: var(--font-body);
	font-size: var(--type-lead-size);
	line-height: var(--type-lead-lh);
}

.pw-heading--on-dark {
	border-top-color: var(--hairline-on-dark);
}

.pw-heading--on-dark .pw-heading__eyebrow,
.pw-heading--on-dark .pw-heading__lead {
	color: var(--text-on-dark-muted);
}

.pw-heading--on-dark .pw-heading__title {
	color: var(--text-on-dark);
}

/* ── Badge ──────────────────────────────────────────────── */
/* Left out: the bundle's filled badge on dark uses #241F19, which is not in
   the palette (HANDOFF section 1); no mockup uses it. */
.pw-badge {
	display: inline-flex;
	align-items: center;
	padding: 6px 10px;
	border: 1px solid var(--hairline);
	border-radius: 0;
	background: transparent;
	color: var(--text-meta);
	font-family: var(--font-body);
	font-weight: var(--fw-semibold);
	font-size: 11px;
	letter-spacing: var(--type-meta-ls);
	line-height: 1;
	text-transform: uppercase;
}

.pw-badge--filled {
	border-color: transparent;
	background: var(--surface-alt);
	color: var(--text-body);
}

.pw-badge--on-dark {
	border-color: var(--hairline-on-dark);
	color: var(--text-on-dark-muted);
}

/* ── Blockquote ─────────────────────────────────────────── */
/* figure.pw-blockquote > blockquote + figcaption. Keep the quote free of <p>:
   Neve styles `blockquote p` in italics. */
.pw-blockquote {
	max-width: 760px;
	margin: 0;
	padding-top: var(--space-6);
	border-top: 1px solid var(--hairline);
}

.pw-blockquote__quote {
	margin: 0;
	padding: 0;
	border: 0;
	color: var(--text-heading);
	font-family: var(--font-display);
	font-weight: var(--fw-regular);
	font-size: 32px;
	line-height: 1.35;
	letter-spacing: -0.005em;
}

.pw-blockquote__cite {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
	margin-top: var(--space-5);
	color: var(--text-meta);
	font-family: var(--font-body);
	font-weight: var(--fw-semibold);
	font-size: var(--type-meta-size);
	letter-spacing: var(--type-meta-ls);
	text-transform: uppercase;
}

.pw-blockquote__role {
	font-weight: var(--fw-regular);
}

.pw-blockquote--on-dark {
	border-top-color: var(--hairline-on-dark);
}

.pw-blockquote--on-dark .pw-blockquote__quote {
	color: var(--text-on-dark);
}

.pw-blockquote--on-dark .pw-blockquote__cite {
	color: var(--text-on-dark-muted);
}

/* ── Tabs ───────────────────────────────────────────────── */
/* role="tablist" with button role="tab" aria-selected. Styles only: arrow-key
   handling and panels come with the component that needs them. */
.pw-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-7);
	border-bottom: 1px solid var(--hairline);
}

.pw-tabs__tab {
	margin-bottom: -1px;
	padding: 0 0 var(--space-4);
	border: 0;
	border-bottom: 2px solid transparent;
	border-radius: 0;
	background: transparent;
	color: var(--text-meta);
	font-family: var(--font-body);
	font-weight: var(--fw-semibold);
	font-size: var(--type-label-size);
	letter-spacing: var(--type-label-ls);
	text-transform: uppercase;
	cursor: pointer;
	transition: var(--transition-color);
}

.pw-tabs__tab:hover,
.pw-tabs__tab:focus-visible {
	color: var(--action-on-light-hover);
}

.pw-tabs__tab[aria-selected="true"] {
	border-bottom-color: var(--action-on-light);
	color: var(--text-heading);
}

.pw-tabs--on-dark {
	border-bottom-color: var(--hairline-on-dark);
}

.pw-tabs--on-dark .pw-tabs__tab {
	color: var(--text-on-dark-muted);
}

.pw-tabs--on-dark .pw-tabs__tab:hover,
.pw-tabs--on-dark .pw-tabs__tab:focus-visible {
	color: var(--action-on-dark-hover);
}

.pw-tabs--on-dark .pw-tabs__tab[aria-selected="true"] {
	border-bottom-color: var(--action-on-dark);
	color: var(--text-on-dark);
}

/* ── Theme addition: accordion answer appears (step 8) ── */
/*
 * HANDOFF 7 asks for an animated height, section 12 for motion on transform
 * and opacity only. Decision (stage A prompt): the answer fades in and moves
 * 4px into place in --dur (200ms); the height changes at once. The global
 * prefers-reduced-motion rule in core.css shortens it to 1ms.
 */
@keyframes pw-accordion-in {
	from {
		opacity: 0;
		transform: translateY(-4px);
	}
}

.pw-accordion__item[open] > :not(summary) {
	animation: pw-accordion-in var(--dur) var(--ease);
}


/*
 * Stage G [13, 30] (Damian, 29.10.2026): lines only between the items of a
 * list – none above the first (the heading above it is enough) and none
 * after the last. One rule for the whole site; a subheading (H3) is set
 * off by the space under it, not by a line.
 */
.pw-accordion {
	border-top: 0;
}

.pw-accordion__item:last-child {
	border-bottom: 0;
}

/* Stage G [103]: a text-link button is as wide as its words, also in a stretched column (cards in posts), so its line is not the width of the column. */
.wp-block-button.is-style-textlink {
	align-self: flex-start;
	width: auto;
}

.wp-block-button.is-style-textlink > .wp-block-button__link {
	width: auto;
}