/* ==========================================================================
   PrintForge for WordPress — customer design layer (style handle printforge-design). Owner: L3.
   Port of docs/ai-design-20261003/claude-review/prototype/pf-design.css, extended with the intake
   fields, uploader, category cards, portal list and state patterns.
   --------------------------------------------------------------------------
   PUBLIC STYLING API = the --pf-* custom properties declared below. Nothing else is public.
   Each token resolves, in order:
     1. --wp--custom--printforge--*  (theme.json settings.custom.printforge.*)
     2. --wp--preset--*              (the active theme's palette, font sizes and spacing)
     3. a neutral fallback that is accessible on a light page
   A skin only REASSIGNS tokens. It never adds selectors (the 3DCentral skin lives in the companion plugin).

   SPECIFICITY CONTRACT ("shield")
   - Tokens live under :where(.pf-design) (specificity 0), so a theme or skin overrides them with anything.
   - Every component selector carries :not(#pf-shield):not(#pf-shield) (an id that never exists): (2,1,0) and up. No class-based
     theme content rule (.page .entry-content h2 is 0,2,1) can beat it, yet every shielded value is a token,
     so the theme still controls the look through the API.
   - An element reset at (2,0,1) zeroes theme margins, padding, colours and floats inside the component;
     component classes (2,1,0) sit above it. [hidden] is (3,2,0) so it always wins.
   - No !important anywhere. Rhythm uses gap, never margins. Logical properties only (works with dir="rtl").
   ========================================================================== */

:where(.pf-design) {
	/* colour */
	--pf-color-text:          var(--wp--custom--printforge--color--text, var(--wp--preset--color--contrast, #18181d));
	--pf-color-text-muted:    var(--wp--custom--printforge--color--text-muted, #5b5b68);          /* >= 4.5:1 on surface and surface-2 */
	--pf-color-surface:       var(--wp--custom--printforge--color--surface, var(--wp--preset--color--base, #ffffff));
	--pf-color-surface-2:     var(--wp--custom--printforge--color--surface-2, #f4f4f8);
	--pf-color-border:        var(--wp--custom--printforge--color--border, #84848f);               /* controls: >= 3:1 */
	--pf-color-divider:       var(--wp--custom--printforge--color--divider, rgb(16 16 28 / .12));  /* decorative only */
	--pf-color-action:        var(--wp--custom--printforge--color--action, var(--wp--preset--color--primary, #18181d));
	--pf-color-selected:      var(--wp--custom--printforge--color--selected, var(--pf-color-action));  /* selection rings, radio and check marks (skins may raise contrast) */
	--pf-color-action-hover:  var(--wp--custom--printforge--color--action-hover, color-mix(in srgb, var(--pf-color-action) 86%, #000));
	--pf-color-on-action:     var(--wp--custom--printforge--color--on-action, #ffffff);
	--pf-color-accent:        var(--wp--custom--printforge--color--accent, var(--wp--preset--color--secondary, #5b3fd6));
	--pf-color-accent-text:   var(--wp--custom--printforge--color--accent-text, var(--pf-color-accent));
	--pf-color-accent-soft:   color-mix(in srgb, var(--pf-color-accent) 10%, var(--pf-color-surface));
	--pf-color-focus:         var(--wp--custom--printforge--color--focus, #0b6bcb);
	--pf-color-success:       var(--wp--custom--printforge--color--success, #1d7550);
	--pf-color-warning:       var(--wp--custom--printforge--color--warning, #8a5300);
	--pf-color-danger:        var(--wp--custom--printforge--color--danger, #b3213f);
	--pf-stage-1:             var(--wp--custom--printforge--stage--1, #2c2c36);   /* viewer backdrop centre */
	--pf-stage-2:             var(--wp--custom--printforge--stage--2, #111117);   /* viewer backdrop edge   */
	--pf-stage-ink:           var(--wp--custom--printforge--stage--ink, #f2f2f7);
	/* type */
	--pf-font-body:           var(--wp--custom--printforge--font--body, var(--wp--preset--font-family--body, inherit));
	--pf-font-display:        var(--wp--custom--printforge--font--display, var(--wp--preset--font-family--heading, var(--pf-font-body)));
	--pf-weight-display:      var(--wp--custom--printforge--font--display-weight, 700);
	--pf-weight-body:         var(--wp--custom--printforge--font--body-weight, 400);
	--pf-text-xs:             .8125rem;
	--pf-text-sm:             var(--wp--preset--font-size--small, .875rem);
	--pf-text-body:           var(--wp--preset--font-size--normal, 1rem);
	--pf-text-lg:             var(--wp--preset--font-size--medium, 1.125rem);
	--pf-text-heading:        var(--wp--preset--font-size--large, 1.25rem);
	--pf-text-title:          clamp(1.6rem, 1.1rem + 2vw, 2.4rem);
	/* space, shape, motion */
	--pf-space-1:             var(--wp--preset--spacing--xs, .5rem);
	--pf-space-2:             var(--wp--preset--spacing--sm, .75rem);
	--pf-space-3:             var(--wp--preset--spacing--md, 1rem);
	--pf-space-4:             var(--wp--preset--spacing--lg, 1.5rem);
	--pf-space-5:             var(--wp--preset--spacing--xl, 2rem);
	--pf-space-6:             var(--wp--preset--spacing--2xl, 3rem);
	--pf-radius-control:      var(--wp--custom--printforge--radius--control, 10px);
	--pf-radius-card:         var(--wp--custom--printforge--radius--card, 16px);
	--pf-radius-media:        var(--wp--custom--printforge--radius--media, 12px);
	--pf-shadow-card:         var(--wp--custom--printforge--shadow--card, 0 1px 2px rgb(0 0 0 / .04), 0 8px 24px rgb(0 0 0 / .06));
	--pf-target:              44px;
	--pf-max-width:           var(--wp--style--global--wide-size, 1200px);
	--pf-sticky-offset:       96px;
	--pf-ease:                cubic-bezier(.2, .7, .2, 1);

	font-family: var(--pf-font-body);
	color: var(--pf-color-text);
	line-height: 1.55;
	-webkit-text-size-adjust: 100%;
}
:where(.pf-design) *:not(#pf-shield):not(#pf-shield), :where(.pf-design) *:not(#pf-shield):not(#pf-shield)::before, :where(.pf-design) *:not(#pf-shield):not(#pf-shield)::after { box-sizing: border-box; }

/* ---- root: paints nothing (UI-05); the host page owns the surface. */
.pf-design:not(#pf-shield):not(#pf-shield) { container: pf / inline-size; max-inline-size: var(--pf-max-width); margin-inline: auto; background: var(--pf-root-bg, none); padding: var(--pf-root-pad, 0); border-radius: var(--pf-root-radius, 0); color: var(--pf-color-text); font-size: var(--pf-text-body); font-weight: var(--pf-weight-body); line-height: 1.55; }

/* ---- SHIELD: element reset (2,0,1). Nothing inside inherits theme content margins, colours or sizes. */
:where(.pf-design) :is(h1,h2,h3,h4,p,ul,ol,li,dl,dt,dd,figure,figcaption,label,fieldset,legend,blockquote,output,small):not(#pf-shield):not(#pf-shield) {
	margin: 0; padding: 0; border: 0; color: inherit; font: inherit; letter-spacing: inherit; text-transform: none; float: none; background: none; box-shadow: none; inline-size: auto; min-inline-size: 0; text-align: inherit; line-height: inherit;
}
:where(.pf-design) :is(ul,ol):not(#pf-shield):not(#pf-shield) { list-style: none; }
:where(.pf-design) :is(li):not(#pf-shield):not(#pf-shield)::marker { content: none; }
:where(.pf-design) :is(a,strong,span,b,em,i,abbr,time):not(#pf-shield):not(#pf-shield) { line-height: inherit; color: inherit; margin: 0; padding: 0; float: none; text-decoration: inherit; background: none; border: 0; font-size: inherit; font-weight: inherit; letter-spacing: inherit; text-transform: none; box-shadow: none; }
:where(.pf-design) :is(strong,b):not(#pf-shield):not(#pf-shield) { font-weight: 700; }
:where(.pf-design) :is(input,select,textarea,button):not(#pf-shield):not(#pf-shield) { margin: 0; padding: 0; inline-size: auto; font: inherit; letter-spacing: inherit; text-transform: none; float: none; box-shadow: none; color: inherit; background-color: transparent; }
/* Structural elements keep the block's line-height (themes set it on every div/section in their content area). */
:where(.pf-design) :is(div,section,aside,article,header,footer,nav,form,table,tr,td,th):not(#pf-shield):not(#pf-shield) { line-height: inherit; }
:where(.pf-design) :is(img,svg,video,canvas):not(#pf-shield):not(#pf-shield) { display: block; max-inline-size: 100%; block-size: auto; margin: 0; padding: 0; border: 0; border-radius: 0; box-shadow: none; float: none; }
:where(.pf-design) :is(hr):not(#pf-shield):not(#pf-shield) { margin: 0; border: 0; }
.pf-design [hidden]:not(#pf-shield):not(#pf-shield):not(#pf-shield) { display: none; }
.pf-design:not(#pf-shield):not(#pf-shield) [tabindex="-1"]:focus { outline: none; box-shadow: none; }
:where(.pf-design) :is(h1,h2,h3,[id]) { scroll-margin-block-start: var(--pf-sticky-offset); }
.pf-design:not(#pf-shield):not(#pf-shield) :focus-visible { outline: 3px solid var(--pf-color-focus); outline-offset: 3px; }
.pf-design:not(#pf-shield):not(#pf-shield) [tabindex="-1"]:focus-visible { outline: none; }

/* ---- SHIELD: text roles (2,1,0). Values are tokens only. */
.pf-eyebrow:not(#pf-shield):not(#pf-shield) { font-size: var(--pf-text-sm); font-weight: 750; letter-spacing: .08em; text-transform: uppercase; color: var(--pf-color-accent-text); line-height: 1.3; }
.pf-title:not(#pf-shield):not(#pf-shield) { font-family: var(--pf-font-display); font-weight: var(--pf-weight-display); font-size: var(--pf-text-title); line-height: 1.12; letter-spacing: -.02em; color: var(--pf-color-text); text-wrap: balance; }
.pf-heading:not(#pf-shield):not(#pf-shield) { font-family: var(--pf-font-display); font-weight: var(--pf-weight-display); font-size: var(--pf-text-heading); line-height: 1.25; letter-spacing: -.01em; color: var(--pf-color-text); text-wrap: balance; }
.pf-subheading:not(#pf-shield):not(#pf-shield) { font-weight: 700; font-size: var(--pf-text-body); color: var(--pf-color-text); line-height: 1.35; }
/* The shop's promise line under the intake's first heading (text slot intake.promise / intake.promise.ai). */
.pf-promise:not(#pf-shield):not(#pf-shield) { display: flex; align-items: flex-start; gap: 8px; font-size: var(--pf-text-sm); font-weight: 600; line-height: 1.45; color: var(--pf-color-text); max-inline-size: 92ch; text-wrap: pretty; }
.pf-promise:not(#pf-shield):not(#pf-shield) svg { flex: none; inline-size: 18px; block-size: 18px; margin-block-start: 1px; color: var(--pf-color-success); }
.pf-lede:not(#pf-shield):not(#pf-shield) { font-size: var(--pf-text-lg); color: var(--pf-color-text-muted); max-inline-size: 62ch; text-wrap: pretty; line-height: 1.5; }
.pf-text:not(#pf-shield):not(#pf-shield) { font-size: var(--pf-text-body); color: var(--pf-color-text); text-wrap: pretty; }
.pf-muted:not(#pf-shield):not(#pf-shield) { color: var(--pf-color-text-muted); }
.pf-small:not(#pf-shield):not(#pf-shield) { font-size: var(--pf-text-sm); line-height: 1.5; }
.pf-strong:not(#pf-shield):not(#pf-shield) { font-weight: 700; color: var(--pf-color-text); }
.pf-num:not(#pf-shield):not(#pf-shield) { font-variant-numeric: tabular-nums; white-space: nowrap; }
.pf-link:not(#pf-shield):not(#pf-shield) { color: var(--pf-color-accent-text); text-decoration: underline; text-underline-offset: .2em; font-weight: 600; cursor: pointer; background: none; border: 0; padding: 0; font: inherit; font-weight: 600; }
.pf-link:not(#pf-shield):not(#pf-shield):hover { text-decoration-thickness: 2px; }
.pf-quote:not(#pf-shield):not(#pf-shield) { font-size: var(--pf-text-sm); color: var(--pf-color-text-muted); font-style: italic; overflow-wrap: anywhere; }
.pf-vh:not(#pf-shield):not(#pf-shield) { position: absolute; inline-size: 1px; block-size: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

/* ---- layout primitives */
.pf-stack:not(#pf-shield):not(#pf-shield) { display: flex; flex-direction: column; gap: var(--pf-gap, var(--pf-space-3)); }
.pf-stack--tight:not(#pf-shield):not(#pf-shield) { --pf-gap: var(--pf-space-1); }
.pf-stack--loose:not(#pf-shield):not(#pf-shield) { --pf-gap: var(--pf-space-5); }
.pf-cluster:not(#pf-shield):not(#pf-shield) { display: flex; flex-wrap: wrap; align-items: center; gap: var(--pf-gap, var(--pf-space-2)); }
.pf-page:not(#pf-shield):not(#pf-shield) { display: flex; flex-direction: column; gap: var(--pf-space-5); padding-block: var(--pf-space-4) var(--pf-space-6); padding-inline: var(--pf-page-gutter, 0px); }
.pf-step:not(#pf-shield):not(#pf-shield) { display: flex; flex-direction: column; gap: var(--pf-space-5); container-type: inline-size; }
.pf-split:not(#pf-shield):not(#pf-shield) { display: grid; gap: var(--pf-space-5); grid-template-columns: minmax(0, 1fr); align-items: start; }
@container pf (min-width: 960px) {
	.pf-split:not(#pf-shield):not(#pf-shield) { grid-template-columns: minmax(0, 1fr) minmax(300px, 360px); }
	.pf-split--media:not(#pf-shield):not(#pf-shield) { grid-template-columns: minmax(0, 1.35fr) minmax(320px, 1fr); }
}
.pf-panel:not(#pf-shield):not(#pf-shield) { background: var(--pf-color-surface); border: 1px solid var(--pf-color-divider); border-radius: var(--pf-radius-card); padding: clamp(var(--pf-space-3), 3vw, var(--pf-space-5)); box-shadow: var(--pf-shadow-card); display: flex; flex-direction: column; gap: var(--pf-space-4); min-inline-size: 0; }
.pf-panel--flat:not(#pf-shield):not(#pf-shield) { box-shadow: none; }
.pf-divider:not(#pf-shield):not(#pf-shield) { block-size: 1px; background: var(--pf-color-divider); border: 0; inline-size: 100%; margin: 0; opacity: 1; }
.pf-section:not(#pf-shield):not(#pf-shield) { display: flex; flex-direction: column; gap: var(--pf-space-3); min-inline-size: 0; }

/* ---- phones: the step itself is not a card (more room for the cards inside it; UI-05) */
@container pf (max-width: 599px) {
	.pf-step.pf-panel:not(#pf-shield):not(#pf-shield) { padding: 0; border: 0; border-radius: 0; box-shadow: none; background: none; }
	.pf-panel:not(#pf-shield):not(#pf-shield) { padding: var(--pf-space-3); }
	.pf-route:not(#pf-shield):not(#pf-shield) { padding: var(--pf-space-3); }
	.pf-fidelity:not(#pf-shield):not(#pf-shield) { padding: var(--pf-space-3); }
}

/* ---- stepper */
.pf-steps:not(#pf-shield):not(#pf-shield) { display: flex; gap: var(--pf-space-1); overflow-x: auto; scrollbar-width: none; padding: 4px; }
.pf-steps:not(#pf-shield):not(#pf-shield)::-webkit-scrollbar { display: none; }
.pf-steps__item:not(#pf-shield):not(#pf-shield) { flex: 1 0 auto; display: flex; align-items: stretch; font-size: var(--pf-text-sm); color: var(--pf-color-text-muted); border-block-start: 3px solid var(--pf-color-divider); }
.pf-steps__item[aria-current="step"]:not(#pf-shield):not(#pf-shield) { color: var(--pf-color-text); font-weight: 700; border-block-start-color: var(--pf-color-action); }
.pf-steps__item.is-done:not(#pf-shield):not(#pf-shield) { color: var(--pf-color-text); border-block-start-color: color-mix(in srgb, var(--pf-color-action) 55%, transparent); }
.pf-steps__btn:not(#pf-shield):not(#pf-shield) { display: flex; align-items: center; gap: var(--pf-space-1); min-block-size: var(--pf-target); min-inline-size: var(--pf-target); padding: var(--pf-space-1) var(--pf-space-2) var(--pf-space-1) 0; background: none; border: 0; color: inherit; font: inherit; font-weight: inherit; text-align: start; cursor: pointer; white-space: nowrap; }
.pf-steps__btn:not(#pf-shield):not(#pf-shield):disabled { cursor: default; }
.pf-steps__btn:not(#pf-shield):not(#pf-shield):focus-visible { outline-offset: -3px; }
.pf-steps__btn:not(#pf-shield):not(#pf-shield):not(:disabled):hover .pf-steps__label { text-decoration: underline; text-underline-offset: .2em; }
.pf-steps__n:not(#pf-shield):not(#pf-shield) { font-variant-numeric: tabular-nums; opacity: .8; }
@container pf (max-width: 599px) {
	.pf-steps__item:not(#pf-shield):not(#pf-shield):not([aria-current="step"]) .pf-steps__label { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
	.pf-steps__item:not(#pf-shield):not(#pf-shield):not([aria-current="step"]) { flex: 0 0 auto; }
	.pf-steps__item[aria-current="step"]:not(#pf-shield):not(#pf-shield) { flex: 1 1 0; min-inline-size: 0; }
	.pf-steps__item[aria-current="step"]:not(#pf-shield):not(#pf-shield) .pf-steps__btn { min-inline-size: 0; max-inline-size: 100%; }
	.pf-steps__item[aria-current="step"]:not(#pf-shield):not(#pf-shield) .pf-steps__label { min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

/* ---- category cards (step 1) */
.pf-groups:not(#pf-shield):not(#pf-shield) { display: flex; flex-direction: column; gap: var(--pf-space-5); border: 0; min-inline-size: 0; }
.pf-group:not(#pf-shield):not(#pf-shield) { display: flex; flex-direction: column; gap: var(--pf-space-3); }
.pf-group__title:not(#pf-shield):not(#pf-shield) { font-weight: 700; font-size: var(--pf-text-sm); color: var(--pf-color-text-muted); letter-spacing: .04em; text-transform: uppercase; }
.pf-cats:not(#pf-shield):not(#pf-shield) { display: grid; gap: var(--pf-space-3); grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); }
.pf-cat:not(#pf-shield):not(#pf-shield) { position: relative; display: flex; flex-direction: column; min-inline-size: 0; border: 1px solid var(--pf-color-border); border-radius: var(--pf-radius-card); background: var(--pf-color-surface); overflow: hidden; cursor: pointer; transition: border-color .15s, box-shadow .2s var(--pf-ease), transform .2s var(--pf-ease); }
.pf-cat:not(#pf-shield):not(#pf-shield):hover { border-color: var(--pf-color-text-muted); box-shadow: var(--pf-shadow-card); }
.pf-cat:not(#pf-shield):not(#pf-shield):has(input:checked) { border-color: var(--pf-color-selected); box-shadow: 0 0 0 1px var(--pf-color-selected), var(--pf-shadow-card); }
.pf-cat:not(#pf-shield):not(#pf-shield):has(input:focus-visible) { outline: 3px solid var(--pf-color-focus); outline-offset: 3px; }
.pf-cat__media:not(#pf-shield):not(#pf-shield) { position: relative; aspect-ratio: 4 / 3; display: grid; place-content: center; color: var(--pf-stage-ink); background: radial-gradient(120% 90% at 50% 30%, var(--pf-stage-1), var(--pf-stage-2)); overflow: hidden; }
.pf-cat__media:not(#pf-shield):not(#pf-shield) img { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; max-inline-size: none; object-fit: cover; object-position: 50% 30%; }
.pf-cat__media:not(#pf-shield):not(#pf-shield) svg { inline-size: 56px; block-size: 56px; opacity: .85; }
.pf-cat__icon:not(#pf-shield):not(#pf-shield) { display: grid; place-content: center; }
/* Icon-only categories (no image in the manifest): a compact row, so a 30-item catalogue stays scannable. */
/* UXR-21: tiles come in runs (choices / inquiry links, in the site's order); a run is no box of its own */
.pf-cats__run:not(#pf-shield):not(#pf-shield) { display: contents; }
.pf-cats:not(#pf-shield):not(#pf-shield):has(> .pf-cats__run > .pf-cat--compact) { grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.pf-cat--compact:not(#pf-shield):not(#pf-shield) { flex-direction: row; align-items: stretch; }
.pf-cat--compact:not(#pf-shield):not(#pf-shield) .pf-cat__desc { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; }
.pf-cat--compact:not(#pf-shield):not(#pf-shield) .pf-cat__media { aspect-ratio: auto; flex: 0 0 76px; min-block-size: 96px; }
.pf-cat--compact:not(#pf-shield):not(#pf-shield) .pf-cat__media svg { inline-size: 34px; block-size: 34px; }
.pf-cat--compact:not(#pf-shield):not(#pf-shield) .pf-cat__body { padding: var(--pf-space-2) var(--pf-space-5) var(--pf-space-2) var(--pf-space-3); }
.pf-cat--compact:not(#pf-shield):not(#pf-shield) .pf-cat__name { font-size: var(--pf-text-body); }
.pf-cat--compact:not(#pf-shield):not(#pf-shield) .pf-cat__meta { margin-block-start: auto; padding-block-start: 4px; } /* in a row: names align at the top, tags at the bottom */
.pf-cat__body:not(#pf-shield):not(#pf-shield) { position: relative; display: flex; flex-direction: column; gap: 4px; padding: var(--pf-space-3) var(--pf-space-3) var(--pf-space-3); flex: 1 1 auto; min-inline-size: 0; }
.pf-cat__name:not(#pf-shield):not(#pf-shield) { font-family: var(--pf-font-display); font-weight: var(--pf-weight-display); font-size: var(--pf-text-lg); line-height: 1.25; color: var(--pf-color-text); padding-inline-end: 30px; }
.pf-cat__desc:not(#pf-shield):not(#pf-shield) { font-size: var(--pf-text-sm); color: var(--pf-color-text-muted); line-height: 1.45; }
.pf-cat__meta:not(#pf-shield):not(#pf-shield) { display: flex; flex-wrap: wrap; align-items: center; gap: 6px var(--pf-space-2); margin-block-start: auto; padding-block-start: var(--pf-space-2); font-size: var(--pf-text-sm); font-weight: 650; color: var(--pf-color-text); }
/* The selection mark sits in the text column's corner on every layout (in the body), never on the picture (rv-ux P3). */
.pf-cat__tick:not(#pf-shield):not(#pf-shield) { position: absolute; inset-block-start: 10px; inset-inline-end: 10px; inline-size: 24px; block-size: 24px; border-radius: 50%; display: grid; place-content: center; background: var(--pf-color-surface); border: 2px solid var(--pf-color-border); color: transparent; z-index: 1; }
.pf-cat:not(#pf-shield):not(#pf-shield):has(input:checked) .pf-cat__tick { background: var(--pf-color-action); border-color: var(--pf-color-action); color: var(--pf-color-on-action); }
.pf-cat__tick:not(#pf-shield):not(#pf-shield) svg { inline-size: 16px; block-size: 16px; }
/* Inquiry tile (UXR-20): the same card, but a link — no selection mark, a dashed edge, "Ask our team ›". */
.pf-cat--inquiry:not(#pf-shield):not(#pf-shield) { color: inherit; text-decoration: none; border-style: dashed; }
.pf-cat--inquiry:not(#pf-shield):not(#pf-shield):hover .pf-cat__name { text-decoration: underline; text-underline-offset: .2em; }
.pf-cat__ask:not(#pf-shield):not(#pf-shield) { display: inline-flex; align-items: center; gap: 4px; color: var(--pf-color-text); }
.pf-cat__ask:not(#pf-shield):not(#pf-shield) svg { inline-size: 16px; block-size: 16px; }
.pf-cat__ask:not(#pf-shield):not(#pf-shield) svg:dir(rtl), [dir="rtl"] .pf-cat__ask:not(#pf-shield):not(#pf-shield) svg { transform: scaleX(-1); }
@container pf (max-width: 599px) {
	.pf-cats:not(#pf-shield):not(#pf-shield) { grid-template-columns: minmax(0, 1fr); }
	.pf-cat:not(#pf-shield):not(#pf-shield) { flex-direction: row; }
	.pf-cat__media:not(#pf-shield):not(#pf-shield) { aspect-ratio: 1; flex: 0 0 104px; align-self: start; }
	.pf-cat__media:not(#pf-shield):not(#pf-shield) svg { inline-size: 40px; block-size: 40px; }
}
@container pf (min-width: 600px) and (max-width: 899px) {
	.pf-cats:not(#pf-shield):not(#pf-shield) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.pf-cat:not(#pf-shield):not(#pf-shield) { flex-direction: row; }
	.pf-cat__media:not(#pf-shield):not(#pf-shield) { aspect-ratio: 1; flex: 0 0 120px; align-self: start; }
	.pf-cat__media:not(#pf-shield):not(#pf-shield) svg { inline-size: 40px; block-size: 40px; }
}


/* ---- choice cards (sizes, enum options) and list choices (colour plans, styles) */
.pf-fieldset:not(#pf-shield):not(#pf-shield) { display: flex; flex-direction: column; gap: var(--pf-space-2); border: 0; min-inline-size: 0; }
.pf-legend:not(#pf-shield):not(#pf-shield) { font-weight: 700; font-size: var(--pf-text-body); color: var(--pf-color-text); padding: 0; margin-block-end: var(--pf-space-1); }
.pf-legend__opt:not(#pf-shield):not(#pf-shield) { font-weight: 500; color: var(--pf-color-text-muted); }
.pf-choices:not(#pf-shield):not(#pf-shield) { display: grid; gap: var(--pf-space-2); grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr)); }
.pf-choices--list:not(#pf-shield):not(#pf-shield) { grid-template-columns: minmax(0, 1fr); }
.pf-choices--two:not(#pf-shield):not(#pf-shield) { grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); }
.pf-choice:not(#pf-shield):not(#pf-shield) { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 4px var(--pf-space-2); min-block-size: calc(var(--pf-target) + 12px); padding: var(--pf-space-2) var(--pf-space-3); border: 1px solid var(--pf-color-border); border-radius: var(--pf-radius-control); background: var(--pf-color-surface); cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.pf-choice:not(#pf-shield):not(#pf-shield):hover { border-color: var(--pf-color-text-muted); }
.pf-choice:not(#pf-shield):not(#pf-shield):has(input:checked) { border-color: var(--pf-color-selected); box-shadow: 0 0 0 1px var(--pf-color-selected); background: color-mix(in srgb, var(--pf-color-selected) 4%, var(--pf-color-surface)); }
.pf-choice:not(#pf-shield):not(#pf-shield):has(input:focus-visible) { outline: 3px solid var(--pf-color-focus); outline-offset: 3px; }
.pf-choice:not(#pf-shield):not(#pf-shield):has(input:disabled) { cursor: not-allowed; color: var(--pf-color-text-muted); background: var(--pf-color-surface-2); }
.pf-choice__body:not(#pf-shield):not(#pf-shield) { display: flex; flex-direction: column; gap: 2px; min-inline-size: 0; }
.pf-choice__name:not(#pf-shield):not(#pf-shield) { font-weight: 700; font-size: var(--pf-text-body); line-height: 1.3; }
.pf-choice__sub:not(#pf-shield):not(#pf-shield) { font-size: var(--pf-text-sm); color: var(--pf-color-text-muted); line-height: 1.4; }
.pf-choice__end:not(#pf-shield):not(#pf-shield) { font-size: var(--pf-text-sm); font-weight: 650; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--pf-color-text); }
.pf-choice--tile:not(#pf-shield):not(#pf-shield) { grid-template-columns: minmax(0, 1fr); align-content: start; text-align: start; padding: var(--pf-space-3); gap: 6px; }
.pf-choice--tile:not(#pf-shield):not(#pf-shield) .pf-choice__name { font-family: var(--pf-font-display); font-size: var(--pf-text-heading); font-weight: var(--pf-weight-display); }
.pf-choice--tile:not(#pf-shield):not(#pf-shield) .pf-choice__body,
.pf-choice--tile:not(#pf-shield):not(#pf-shield) > .pf-choice__name { padding-inline-end: calc(22px + var(--pf-space-2)); }
.pf-choice--tile:not(#pf-shield):not(#pf-shield) .pf-radio { position: absolute; inset-block-start: var(--pf-space-2); inset-inline-end: var(--pf-space-2); }
.pf-radio:not(#pf-shield):not(#pf-shield), .pf-check:not(#pf-shield):not(#pf-shield) { appearance: none; -webkit-appearance: none; flex: 0 0 auto; inline-size: 22px; block-size: 22px; margin: 0; border: 2px solid var(--pf-color-border); background: var(--pf-color-surface); display: grid; place-content: center; cursor: pointer; padding: 0; }
.pf-radio:not(#pf-shield):not(#pf-shield) { border-radius: 50%; }
.pf-radio:not(#pf-shield):not(#pf-shield):checked { border-color: var(--pf-color-selected); }
.pf-radio:not(#pf-shield):not(#pf-shield):checked::after { content: ""; inline-size: 10px; block-size: 10px; border-radius: 50%; background: var(--pf-color-selected); }
.pf-check:not(#pf-shield):not(#pf-shield) { border-radius: 6px; margin-block-start: 1px; }
.pf-check:not(#pf-shield):not(#pf-shield):checked { background: var(--pf-color-selected); border-color: var(--pf-color-selected); }
.pf-check:not(#pf-shield):not(#pf-shield):checked::after { content: ""; inline-size: 6px; block-size: 11px; border: solid var(--pf-color-on-action); border-width: 0 2.5px 2.5px 0; transform: translateY(-1px) rotate(45deg); }
.pf-check:not(#pf-shield):not(#pf-shield):disabled, .pf-radio:not(#pf-shield):not(#pf-shield):disabled { opacity: .55; cursor: not-allowed; }
.pf-swatches:not(#pf-shield):not(#pf-shield) { display: flex; gap: 3px; flex-wrap: wrap; margin-block-start: 4px; }
.pf-swatches:not(#pf-shield):not(#pf-shield) i { inline-size: 10px; block-size: 10px; border-radius: 50%; background: #8a8f98; border: 1px solid rgb(0 0 0 / .18); }
/* Decorative filament dots: a fixed, theme-independent spread of hues (count = colours in the plan). */
.pf-swatches i:not(#pf-shield):not(#pf-shield):nth-child(16n+2) { background: #f2f0ea; }
.pf-swatches i:not(#pf-shield):not(#pf-shield):nth-child(16n+3) { background: #1f1f24; }
.pf-swatches i:not(#pf-shield):not(#pf-shield):nth-child(16n+4) { background: #d64541; }
.pf-swatches i:not(#pf-shield):not(#pf-shield):nth-child(16n+5) { background: #2e6fd8; }
.pf-swatches i:not(#pf-shield):not(#pf-shield):nth-child(16n+6) { background: #f2b632; }
.pf-swatches i:not(#pf-shield):not(#pf-shield):nth-child(16n+7) { background: #2f9e5b; }
.pf-swatches i:not(#pf-shield):not(#pf-shield):nth-child(16n+8) { background: #e7a3b5; }
.pf-swatches i:not(#pf-shield):not(#pf-shield):nth-child(16n+9) { background: #7b4fd1; }
.pf-swatches i:not(#pf-shield):not(#pf-shield):nth-child(16n+10) { background: #f08a3c; }
.pf-swatches i:not(#pf-shield):not(#pf-shield):nth-child(16n+11) { background: #6fc3df; }
.pf-swatches i:not(#pf-shield):not(#pf-shield):nth-child(16n+12) { background: #8b5a3c; }
.pf-swatches i:not(#pf-shield):not(#pf-shield):nth-child(16n+13) { background: #c9d94f; }
.pf-swatches i:not(#pf-shield):not(#pf-shield):nth-child(16n+14) { background: #5b6472; }
.pf-swatches i:not(#pf-shield):not(#pf-shield):nth-child(16n+15) { background: #e3c7a1; }
.pf-swatches i:not(#pf-shield):not(#pf-shield):nth-child(16n+16) { background: #1d8f8a; }
.pf-swatches i:not(#pf-shield):not(#pf-shield):nth-child(16n+17) { background: #b8344f; }

/* ---- chips (multi-select) */
.pf-chips:not(#pf-shield):not(#pf-shield) { display: flex; flex-wrap: wrap; gap: var(--pf-space-2); }
.pf-chip:not(#pf-shield):not(#pf-shield) { position: relative; display: inline-flex; align-items: center; gap: var(--pf-space-1); min-block-size: var(--pf-target); padding: 6px 16px 6px 12px; border: 1px solid var(--pf-color-border); border-radius: 999px; background: var(--pf-color-surface); font-weight: 650; cursor: pointer; transition: border-color .15s, background-color .15s; }
.pf-chip:not(#pf-shield):not(#pf-shield):hover { border-color: var(--pf-color-text-muted); }
.pf-chip:not(#pf-shield):not(#pf-shield):has(input:checked) { border-color: var(--pf-color-selected); background: color-mix(in srgb, var(--pf-color-selected) 8%, var(--pf-color-surface)); box-shadow: 0 0 0 1px var(--pf-color-selected); }
.pf-chip:not(#pf-shield):not(#pf-shield):has(input:focus-visible) { outline: 3px solid var(--pf-color-focus); outline-offset: 3px; }
.pf-chip:not(#pf-shield):not(#pf-shield) svg { inline-size: 18px; block-size: 18px; }

/* ---- text fields */
.pf-fields:not(#pf-shield):not(#pf-shield) { display: grid; gap: var(--pf-space-3); grid-template-columns: minmax(0, 1fr); }
@container (min-width: 560px) { .pf-fields--two:not(#pf-shield):not(#pf-shield) { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pf-fields--two:not(#pf-shield):not(#pf-shield) > .pf-field--wide { grid-column: 1 / -1; } }
.pf-field:not(#pf-shield):not(#pf-shield) { display: flex; flex-direction: column; gap: 6px; min-inline-size: 0; }
.pf-label:not(#pf-shield):not(#pf-shield) { font-weight: 700; font-size: var(--pf-text-body); color: var(--pf-color-text); line-height: 1.35; }
.pf-label__opt:not(#pf-shield):not(#pf-shield) { font-weight: 500; color: var(--pf-color-text-muted); }
.pf-help:not(#pf-shield):not(#pf-shield) { font-size: var(--pf-text-sm); color: var(--pf-color-text-muted); line-height: 1.45; }
.pf-input:not(#pf-shield):not(#pf-shield), .pf-textarea:not(#pf-shield):not(#pf-shield), .pf-select:not(#pf-shield):not(#pf-shield) { display: block; inline-size: 100%; max-inline-size: 100%; min-block-size: var(--pf-target); padding: .6em .8em; border: 1px solid var(--pf-color-border); border-radius: var(--pf-radius-control); background: var(--pf-color-surface); color: var(--pf-color-text); font: inherit; font-size: var(--pf-text-body); line-height: 1.4; outline: 0; box-shadow: none; appearance: none; }
.pf-textarea:not(#pf-shield):not(#pf-shield) { min-block-size: 8.5em; resize: vertical; line-height: 1.55; }
.pf-input:not(#pf-shield):not(#pf-shield):focus-visible, .pf-textarea:not(#pf-shield):not(#pf-shield):focus-visible { outline: 3px solid var(--pf-color-focus); outline-offset: 1px; }
.pf-input:not(#pf-shield):not(#pf-shield)::placeholder, .pf-textarea:not(#pf-shield):not(#pf-shield)::placeholder { color: var(--pf-color-text-muted); opacity: 1; }
.pf-design:not(#pf-shield):not(#pf-shield) [aria-invalid="true"]:is(.pf-input, .pf-textarea) { border-color: var(--pf-color-danger); box-shadow: 0 0 0 1px var(--pf-color-danger); }
.pf-design:not(#pf-shield):not(#pf-shield) :is(.pf-fieldset, .pf-ack, .pf-chips, .pf-choices, .pf-drop)[aria-invalid="true"] { --pf-color-border: var(--pf-color-danger); }
.pf-field__foot:not(#pf-shield):not(#pf-shield) { display: flex; justify-content: space-between; align-items: baseline; gap: var(--pf-space-2); }
.pf-count:not(#pf-shield):not(#pf-shield) { margin-inline-start: auto; font-size: var(--pf-text-xs); color: var(--pf-color-text-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.pf-error:not(#pf-shield):not(#pf-shield) { display: flex; gap: 6px; align-items: flex-start; font-size: var(--pf-text-sm); font-weight: 650; color: var(--pf-color-danger); line-height: 1.4; }
.pf-error:not(#pf-shield):not(#pf-shield) svg { flex: 0 0 auto; inline-size: 18px; block-size: 18px; margin-block-start: 1px; }
.pf-error:not(#pf-shield):not(#pf-shield):empty { display: none; }

/* ---- quantity */
.pf-qty:not(#pf-shield):not(#pf-shield) { display: inline-flex; align-items: center; border: 1px solid var(--pf-color-border); border-radius: var(--pf-radius-control); background: var(--pf-color-surface); overflow: hidden; inline-size: max-content; }
.pf-qty__btn:not(#pf-shield):not(#pf-shield) { inline-size: var(--pf-target); block-size: var(--pf-target); display: grid; place-content: center; background: none; border: 0; color: var(--pf-color-text); cursor: pointer; font-size: 1.25rem; font-weight: 700; line-height: 1; padding: 0; }
.pf-qty__btn:not(#pf-shield):not(#pf-shield):hover { background: var(--pf-color-surface-2); }
.pf-qty__btn:not(#pf-shield):not(#pf-shield):disabled { color: var(--pf-color-text-muted); cursor: not-allowed; background: none; opacity: .5; }
.pf-qty__btn:not(#pf-shield):not(#pf-shield) svg { inline-size: 18px; block-size: 18px; }
.pf-qty__val:not(#pf-shield):not(#pf-shield) { min-inline-size: 3ch; text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; }

/* ---- uploader */
.pf-drop:not(#pf-shield):not(#pf-shield) { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--pf-space-2); padding: var(--pf-space-5) var(--pf-space-3); border: 2px dashed var(--pf-color-border); border-radius: var(--pf-radius-card); background: var(--pf-color-surface-2); text-align: center; transition: border-color .15s, background-color .15s; }
.pf-drop.is-over:not(#pf-shield):not(#pf-shield) { border-color: var(--pf-color-action); background: var(--pf-color-accent-soft); }
.pf-drop__icon:not(#pf-shield):not(#pf-shield) { inline-size: 48px; block-size: 48px; border-radius: 50%; display: grid; place-content: center; background: var(--pf-color-surface); color: var(--pf-color-accent-text); border: 1px solid var(--pf-color-divider); }
.pf-drop__icon:not(#pf-shield):not(#pf-shield) svg { inline-size: 24px; block-size: 24px; }
.pf-file:not(#pf-shield):not(#pf-shield) { position: absolute; inline-size: 1px; block-size: 1px; opacity: 0; overflow: hidden; clip-path: inset(50%); }
.pf-thumbs:not(#pf-shield):not(#pf-shield) { display: grid; gap: var(--pf-space-2); grid-template-columns: repeat(auto-fill, minmax(min(100%, 132px), 1fr)); }
.pf-thumb:not(#pf-shield):not(#pf-shield) { position: relative; display: flex; flex-direction: column; border: 1px solid var(--pf-color-divider); border-radius: var(--pf-radius-media); overflow: hidden; background: var(--pf-color-surface); min-inline-size: 0; }
.pf-thumb.is-error:not(#pf-shield):not(#pf-shield) { border-color: var(--pf-color-danger); box-shadow: 0 0 0 1px var(--pf-color-danger); }
.pf-thumb__img:not(#pf-shield):not(#pf-shield) { position: relative; aspect-ratio: 1; background: var(--pf-color-surface-2); display: grid; place-content: center; color: var(--pf-color-text-muted); overflow: hidden; }
.pf-thumb__img:not(#pf-shield):not(#pf-shield) img { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; max-inline-size: none; object-fit: cover; transition: opacity .2s; }
.pf-thumb.is-busy:not(#pf-shield):not(#pf-shield) .pf-thumb__img img { opacity: .55; }
.pf-thumb__img:not(#pf-shield):not(#pf-shield) svg { inline-size: 36px; block-size: 36px; }
.pf-thumb__bar:not(#pf-shield):not(#pf-shield) { position: absolute; inset-inline-start: 0; inset-block-end: 0; block-size: 4px; inline-size: 100%; background: rgb(0 0 0 / .25); }
.pf-thumb__bar:not(#pf-shield):not(#pf-shield) i { display: block; block-size: 100%; inline-size: var(--pf-progress, 0%); background: var(--pf-color-action); transition: inline-size .2s linear; }
.pf-thumb__meta:not(#pf-shield):not(#pf-shield) { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px 10px; font-size: var(--pf-text-xs); line-height: 1.35; min-inline-size: 0; }
.pf-thumb__name:not(#pf-shield):not(#pf-shield) { font-weight: 650; color: var(--pf-color-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pf-thumb__status:not(#pf-shield):not(#pf-shield) { color: var(--pf-color-text-muted); }
.pf-thumb.is-error:not(#pf-shield):not(#pf-shield) .pf-thumb__status { color: var(--pf-color-danger); font-weight: 650; white-space: normal; }
.pf-thumb.is-done:not(#pf-shield):not(#pf-shield) .pf-thumb__status { color: var(--pf-color-success); font-weight: 650; }
.pf-thumb__remove:not(#pf-shield):not(#pf-shield) { position: absolute; inset-block-start: 6px; inset-inline-end: 6px; inline-size: var(--pf-target); block-size: var(--pf-target); display: grid; place-content: center; padding: 0; border-radius: 50%; border: 0; background: transparent; color: #fff; cursor: pointer; z-index: 1; }
.pf-thumb__remove:not(#pf-shield):not(#pf-shield)::before { content: ""; position: absolute; inset: 7px; border-radius: 50%; background: rgb(10 10 16 / .66); border: 1px solid rgb(255 255 255 / .35); }
.pf-thumb__remove:not(#pf-shield):not(#pf-shield) svg { position: relative; inline-size: 16px; block-size: 16px; }
.pf-thumb__remove:not(#pf-shield):not(#pf-shield):hover::before { background: rgb(10 10 16 / .85); }
.pf-guide:not(#pf-shield):not(#pf-shield) { display: grid; gap: var(--pf-space-3); grid-template-columns: minmax(0, 1fr); padding: var(--pf-space-3); border-radius: var(--pf-radius-media); background: var(--pf-color-surface-2); }
@container (min-width: 640px) { .pf-guide:not(#pf-shield):not(#pf-shield) { grid-template-columns: 1.4fr 1fr; } }
.pf-guide__col:not(#pf-shield):not(#pf-shield) { display: flex; flex-direction: column; gap: 6px; }
.pf-cross:not(#pf-shield):not(#pf-shield) { display: flex; flex-direction: column; gap: 6px; }
.pf-cross li:not(#pf-shield):not(#pf-shield) { display: grid; grid-template-columns: 20px 1fr; gap: 6px; font-size: var(--pf-text-sm); }
.pf-cross:not(#pf-shield):not(#pf-shield) li::before { content: "\00D7"; font-weight: 800; color: var(--pf-color-danger); text-align: center; }

/* ---- route cards (radio cards, equal anatomy, subgrid rows) */
.pf-routes:not(#pf-shield):not(#pf-shield) { border: 0; min-inline-size: 0; }
.pf-routes__grid:not(#pf-shield):not(#pf-shield) { display: grid; gap: var(--pf-space-4); grid-template-columns: minmax(0, 1fr); }
@container (min-width: 640px) { .pf-routes__grid:not(#pf-shield):not(#pf-shield) { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(6, auto); } }
.pf-route:not(#pf-shield):not(#pf-shield) { position: relative; display: grid; grid-template-rows: subgrid; grid-row: span 6; gap: var(--pf-space-3); background: var(--pf-color-surface); border: 1px solid var(--pf-color-border); border-radius: var(--pf-radius-card); padding: var(--pf-space-4); cursor: pointer; transition: border-color .15s, box-shadow .15s; min-inline-size: 0; }
@container (max-width: 639px) { .pf-route:not(#pf-shield):not(#pf-shield) { grid-template-rows: none; grid-row: auto; display: flex; flex-direction: column; } }
.pf-route:not(#pf-shield):not(#pf-shield):hover { border-color: var(--pf-color-text-muted); }
.pf-route:not(#pf-shield):not(#pf-shield):has(input:checked) { border-color: var(--pf-color-action); box-shadow: 0 0 0 1px var(--pf-color-action), var(--pf-shadow-card); }
.pf-route:not(#pf-shield):not(#pf-shield):has(input:focus-visible) { outline: 3px solid var(--pf-color-focus); outline-offset: 3px; }
.pf-route.is-unavailable:not(#pf-shield):not(#pf-shield) { cursor: default; background: var(--pf-color-surface-2); border-style: dashed; }
.pf-route.is-unavailable:not(#pf-shield):not(#pf-shield):hover { border-color: var(--pf-color-border); }
.pf-route.is-unavailable:not(#pf-shield):not(#pf-shield) .pf-route__media, .pf-route.is-unavailable:not(#pf-shield):not(#pf-shield) .pf-facts, .pf-route.is-unavailable:not(#pf-shield):not(#pf-shield) .pf-price { opacity: .62; }
.pf-route__head:not(#pf-shield):not(#pf-shield) { display: flex; align-items: flex-start; gap: var(--pf-space-2); }
.pf-route__title:not(#pf-shield):not(#pf-shield) { display: flex; flex-wrap: wrap; align-items: center; gap: 6px var(--pf-space-2); }
.pf-route__radio:not(#pf-shield):not(#pf-shield) { appearance: none; -webkit-appearance: none; flex: 0 0 auto; inline-size: 22px; block-size: 22px; margin: 3px 0 0; border: 2px solid var(--pf-color-border); border-radius: 50%; background: var(--pf-color-surface); display: grid; place-content: center; padding: 0; cursor: pointer; }
.pf-route__radio:not(#pf-shield):not(#pf-shield):checked { border-color: var(--pf-color-action); }
.pf-route__radio:not(#pf-shield):not(#pf-shield):checked::after { content: ""; inline-size: 10px; block-size: 10px; border-radius: 50%; background: var(--pf-color-action); }
.pf-route__radio:not(#pf-shield):not(#pf-shield):disabled { cursor: not-allowed; opacity: .5; }
.pf-route__media:not(#pf-shield):not(#pf-shield) { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.pf-route__media:not(#pf-shield):not(#pf-shield) figure { position: relative; aspect-ratio: 1; border-radius: calc(var(--pf-radius-media) - 2px); overflow: hidden; background: var(--pf-stage-2); }
.pf-route__media:not(#pf-shield):not(#pf-shield) img { inline-size: 100%; block-size: 100%; max-inline-size: none; object-fit: cover; }
.pf-route__media figcaption:not(#pf-shield):not(#pf-shield) { position: absolute; inset-inline: 0; inset-block-end: 0; padding: 14px 6px 5px; font-size: 11px; font-weight: 650; line-height: 1.2; color: #fff; background: linear-gradient(transparent, rgb(0 0 0 / .72)); }
.pf-route__ph:not(#pf-shield):not(#pf-shield) { display: grid; place-content: center; justify-items: center; gap: 4px; block-size: 100%; color: var(--pf-stage-ink); background: radial-gradient(circle at 50% 35%, var(--pf-stage-1), var(--pf-stage-2)); }
.pf-route__ph:not(#pf-shield):not(#pf-shield) svg { inline-size: 40%; block-size: auto; opacity: .85; }
.pf-route__note:not(#pf-shield):not(#pf-shield) { font-size: var(--pf-text-sm); color: var(--pf-color-text-muted); display: flex; flex-direction: column; gap: 6px; }
.pf-route--ai:not(#pf-shield):not(#pf-shield):not(.is-unavailable) { border-color: color-mix(in srgb, var(--pf-color-action) 45%, var(--pf-color-border)); }
.pf-route__cta:not(#pf-shield):not(#pf-shield) { display: flex; align-items: center; justify-content: center; min-block-size: 44px; }
.pf-route__choose:not(#pf-shield):not(#pf-shield) { display: inline-flex; align-items: center; justify-content: center; inline-size: 100%; min-block-size: 44px; padding: 10px var(--pf-space-3); border-radius: var(--pf-radius-control); font-weight: 700; border: 2px solid var(--pf-color-text); color: var(--pf-color-text); background: var(--pf-color-surface); }
.pf-route--ai:not(#pf-shield):not(#pf-shield) .pf-route__choose { border-color: var(--pf-color-action); background: var(--pf-color-action); color: var(--pf-color-on-action); }
.pf-route.is-unavailable:not(#pf-shield):not(#pf-shield) .pf-route__choose { visibility: hidden; }
.pf-route__selected:not(#pf-shield):not(#pf-shield) { display: inline-flex; align-items: center; gap: 6px; font-weight: 750; color: var(--pf-color-action-text, var(--pf-color-accent-text)); }
.pf-route__selected:not(#pf-shield):not(#pf-shield) svg { inline-size: 18px; block-size: 18px; }
.pf-facts:not(#pf-shield):not(#pf-shield) { display: grid; grid-template-columns: fit-content(38%) minmax(0, 1fr); gap: 7px var(--pf-space-3); align-content: start; } /* rv-ui P3: long FR labels wrap instead of squeezing the values */
.pf-facts dt:not(#pf-shield):not(#pf-shield) { font-size: var(--pf-text-sm); color: var(--pf-color-text-muted); }
.pf-facts dd:not(#pf-shield):not(#pf-shield) { font-size: var(--pf-text-sm); color: var(--pf-color-text); font-weight: 600; }
/* Facts stack when the card is narrower than ~380 px (route cards are not containers: subgrid needs that). */
@container (max-width: 380px) or ((min-width: 640px) and (max-width: 776px)) { .pf-facts:not(#pf-shield):not(#pf-shield) { grid-template-columns: minmax(0, 1fr); gap: 0 0; } .pf-facts dd:not(#pf-shield):not(#pf-shield) { padding-block-end: 6px; } }
@container (max-width: 392px) or ((min-width: 640px) and (max-width: 800px)) { .pf-route .pf-price__row--soft:not(#pf-shield):not(#pf-shield) { flex-direction: column; align-items: flex-start; gap: 0; } .pf-route .pf-price__row--soft:not(#pf-shield):not(#pf-shield) > :last-child { text-align: start; } }
.pf-tag:not(#pf-shield):not(#pf-shield) { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; letter-spacing: .02em; padding: 3px 10px; border-radius: 999px; background: var(--pf-color-surface-2); color: var(--pf-color-text); border: 1px solid var(--pf-color-divider); line-height: 1.4; white-space: nowrap; }
.pf-badge:not(#pf-shield):not(#pf-shield) { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 750; padding: 3px 10px; border-radius: 999px; background: var(--pf-color-accent-soft); color: var(--pf-color-accent-text); border: 1px solid color-mix(in srgb, var(--pf-color-accent) 30%, transparent); line-height: 1.4; }
.pf-badge:not(#pf-shield):not(#pf-shield) svg { inline-size: 14px; block-size: 14px; }
.pf-badge--solid:not(#pf-shield):not(#pf-shield) { background: var(--pf-color-accent-text); color: var(--pf-color-surface); border-color: transparent; }

/* ---- price box (print / today / later) */
.pf-price:not(#pf-shield):not(#pf-shield) { display: grid; gap: 6px; padding: var(--pf-space-3); border-radius: var(--pf-radius-media); background: var(--pf-color-surface-2); }
.pf-price__row:not(#pf-shield):not(#pf-shield) { display: flex; justify-content: space-between; align-items: baseline; gap: var(--pf-space-3); font-size: var(--pf-text-sm); color: var(--pf-color-text); line-height: 1.4; }
.pf-price__row:not(#pf-shield):not(#pf-shield) > :last-child { font-variant-numeric: tabular-nums; white-space: nowrap; font-weight: 600; text-align: end; }
.pf-price__row--credit:not(#pf-shield):not(#pf-shield) > :last-child { color: var(--pf-color-success); }
.pf-price__row--total:not(#pf-shield):not(#pf-shield) { border-block-start: 1px solid var(--pf-color-divider); padding-block-start: 8px; margin-block-start: 2px; font-size: var(--pf-text-body); font-weight: 700; }
.pf-price__row--today:not(#pf-shield):not(#pf-shield) { font-weight: 700; }
.pf-price__row--soft:not(#pf-shield):not(#pf-shield) > :last-child { white-space: normal; font-weight: 600; }
@container (max-width: 360px) { .pf-price__row--soft:not(#pf-shield):not(#pf-shield) { flex-direction: column; align-items: flex-start; gap: 0; } .pf-price__row--soft:not(#pf-shield):not(#pf-shield) > :last-child { text-align: start; } .pf-tag:not(#pf-shield):not(#pf-shield) { white-space: normal; } }
.pf-price__note:not(#pf-shield):not(#pf-shield) { font-size: 12.5px; color: var(--pf-color-text-muted); line-height: 1.45; font-weight: 400; }
.pf-price--lg .pf-price__row:not(#pf-shield):not(#pf-shield) { font-size: var(--pf-text-body); }
.pf-price--lg .pf-price__row--total:not(#pf-shield):not(#pf-shield) { font-size: var(--pf-text-lg); }

/* ---- buttons: exactly one primary per screen; full width under 600px */
.pf-actions:not(#pf-shield):not(#pf-shield) { display: flex; flex-wrap: wrap; gap: var(--pf-space-2); align-items: center; }
.pf-actions__end:not(#pf-shield):not(#pf-shield) { margin-inline-start: auto; }
.pf-btn:not(#pf-shield):not(#pf-shield) { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .5em; min-block-size: var(--pf-target); padding: .7em 1.25em; border-radius: var(--pf-radius-control); border: 2px solid transparent; font: inherit; font-weight: 700; font-size: var(--pf-text-body); line-height: 1.2; text-align: center; text-decoration: none; cursor: pointer; transition: background-color .15s, border-color .15s, color .15s, box-shadow .15s; box-shadow: none; text-transform: none; letter-spacing: normal; }
.pf-btn--primary:not(#pf-shield):not(#pf-shield) { background: var(--pf-color-action); color: var(--pf-color-on-action); border-color: var(--pf-color-action); }
.pf-btn--primary:not(#pf-shield):not(#pf-shield):hover { background: var(--pf-color-action-hover); border-color: var(--pf-color-action-hover); color: var(--pf-color-on-action); }
.pf-btn--secondary:not(#pf-shield):not(#pf-shield) { background: transparent; color: var(--pf-color-text); border-color: var(--pf-color-border); }
.pf-btn--secondary:not(#pf-shield):not(#pf-shield):hover { border-color: var(--pf-color-text); color: var(--pf-color-text); }
.pf-btn--quiet:not(#pf-shield):not(#pf-shield) { background: transparent; color: var(--pf-color-text); padding-inline: .6em; text-decoration: underline; text-underline-offset: .2em; }
.pf-btn--quiet:not(#pf-shield):not(#pf-shield):hover { text-decoration-thickness: 2px; color: var(--pf-color-text); }
.pf-btn--sm:not(#pf-shield):not(#pf-shield) { min-block-size: var(--pf-target); padding: .45em .9em; font-size: var(--pf-text-sm); }
.pf-btn[aria-disabled="true"]:not(#pf-shield):not(#pf-shield), .pf-btn:not(#pf-shield):not(#pf-shield):disabled { cursor: not-allowed; background: var(--pf-color-surface-2); color: var(--pf-color-text-muted); border-color: var(--pf-color-divider); }
.pf-btn[aria-busy="true"]:not(#pf-shield):not(#pf-shield) { cursor: progress; }
.pf-btn[aria-busy="true"]:not(#pf-shield):not(#pf-shield)::after { content: ""; inline-size: 1em; block-size: 1em; border-radius: 50%; border: 2.5px solid currentColor; border-inline-end-color: transparent; animation: pf-spin .8s linear infinite; }
@keyframes pf-spin { to { transform: rotate(360deg); } }
.pf-btn__sub:not(#pf-shield):not(#pf-shield) { display: block; font-size: 12.5px; font-weight: 600; opacity: .85; }
.pf-btn--block:not(#pf-shield):not(#pf-shield) { inline-size: 100%; }
.pf-btn:not(#pf-shield):not(#pf-shield) svg { inline-size: 18px; block-size: 18px; flex: 0 0 auto; }
@container pf (max-width: 599px) {
	.pf-actions:not(#pf-shield):not(#pf-shield) { flex-direction: column; align-items: stretch; }
	.pf-actions:not(#pf-shield):not(#pf-shield) > .pf-btn { inline-size: 100%; }
	.pf-actions__end:not(#pf-shield):not(#pf-shield) { margin-inline-start: 0; }
}

/* ---- phones: the total and the one action stay in reach while the customer reads the review (UXR-18) */
.pf-paybar:not(#pf-shield):not(#pf-shield) { display: none; }
@container pf (max-width: 959px) {
	.pf-paybar:not(#pf-shield):not(#pf-shield) { position: sticky; inset-block-end: 0; z-index: 2; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--pf-space-3); padding: var(--pf-space-2) var(--pf-space-3); margin-inline: calc(-1 * var(--pf-space-2)); border-radius: var(--pf-radius-card) var(--pf-radius-card) 0 0; background: var(--pf-color-surface); border: 1px solid var(--pf-color-divider); box-shadow: 0 -8px 24px rgb(0 0 0 / .08); }
	.pf-paybar__price:not(#pf-shield):not(#pf-shield) { display: flex; flex-direction: column; font-size: var(--pf-text-sm); line-height: 1.3; }
	.pf-paybar:not(#pf-shield):not(#pf-shield) > .pf-btn { white-space: nowrap; }
}
/* Phones: under the preselected AI card, the designer route stays one tap away (UXR-40). */
.pf-route__alt:not(#pf-shield):not(#pf-shield) { margin-block: calc(-1 * var(--pf-space-2)) 0; }
@container (min-width: 640px) { .pf-route__alt:not(#pf-shield):not(#pf-shield) { display: none; } }
.pf-thumb__retry:not(#pf-shield):not(#pf-shield) { align-self: start; min-block-size: var(--pf-target); }

/* ---- sticky project summary */
.pf-summary:not(#pf-shield):not(#pf-shield) { position: sticky; inset-block-start: var(--pf-sticky-offset); }
@container pf (max-width: 959px) { .pf-summary:not(#pf-shield):not(#pf-shield) { position: static; } }
.pf-summary__refs:not(#pf-shield):not(#pf-shield) { display: flex; flex-wrap: wrap; gap: 6px; }
.pf-summary__refs:not(#pf-shield):not(#pf-shield) > * { position: relative; inline-size: 52px; block-size: 52px; border-radius: 8px; overflow: hidden; background: var(--pf-color-surface-2); border: 1px solid var(--pf-color-divider); display: grid; place-content: center; color: var(--pf-color-text-muted); }
.pf-summary__refs:not(#pf-shield):not(#pf-shield) img { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; max-inline-size: none; object-fit: cover; }
.pf-summary__refs:not(#pf-shield):not(#pf-shield) svg { inline-size: 26px; block-size: 26px; }
.pf-kv:not(#pf-shield):not(#pf-shield) { display: grid; grid-template-columns: minmax(0, auto) minmax(0, 1fr); gap: 6px var(--pf-space-3); }
.pf-kv__row:not(#pf-shield):not(#pf-shield) { display: contents; }
.pf-kv dt:not(#pf-shield):not(#pf-shield) { font-size: var(--pf-text-sm); color: var(--pf-color-text-muted); }
.pf-kv dd:not(#pf-shield):not(#pf-shield) { font-size: var(--pf-text-sm); font-weight: 600; text-align: end; overflow-wrap: anywhere; }
.pf-kv--start dd:not(#pf-shield):not(#pf-shield) { text-align: start; }

/* ---- photo placeholder */
.pf-photo:not(#pf-shield):not(#pf-shield) { display: grid; place-content: center; justify-items: center; gap: 2px; inline-size: 100%; block-size: 100%; background: linear-gradient(160deg, color-mix(in srgb, var(--pf-color-text) 10%, var(--pf-color-surface)), color-mix(in srgb, var(--pf-color-text) 22%, var(--pf-color-surface))); color: var(--pf-color-text-muted); }
.pf-photo:not(#pf-shield):not(#pf-shield) svg { inline-size: 46%; block-size: auto; }

/* ---- per-category fidelity disclosure */
.pf-fidelity:not(#pf-shield):not(#pf-shield) { display: grid; gap: var(--pf-space-3); grid-template-columns: minmax(0, 1fr); padding: var(--pf-space-4); border-radius: var(--pf-radius-card); border: 1px solid var(--pf-color-border); background: var(--pf-color-surface); }
@container (min-width: 640px) { .pf-fidelity:not(#pf-shield):not(#pf-shield) { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pf-fidelity:not(#pf-shield):not(#pf-shield) > .pf-fidelity__head, .pf-fidelity:not(#pf-shield):not(#pf-shield) > .pf-fidelity__foot { grid-column: 1 / -1; } }
.pf-fidelity__col:not(#pf-shield):not(#pf-shield) { display: flex; flex-direction: column; gap: var(--pf-space-2); padding: var(--pf-space-3); border-radius: var(--pf-radius-media); background: var(--pf-color-surface-2); }
.pf-fidelity__label:not(#pf-shield):not(#pf-shield) { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: var(--pf-text-body); }
.pf-fidelity__label:not(#pf-shield):not(#pf-shield) svg { flex: 0 0 auto; inline-size: 22px; block-size: 22px; color: var(--pf-color-accent-text); }
.pf-fidelity:not(#pf-shield):not(#pf-shield) ul, .pf-bullets:not(#pf-shield):not(#pf-shield) { display: flex; flex-direction: column; gap: 6px; }
.pf-fidelity li:not(#pf-shield):not(#pf-shield), .pf-bullets li:not(#pf-shield):not(#pf-shield) { position: relative; padding-inline-start: 20px; font-size: var(--pf-text-sm); }
.pf-fidelity:not(#pf-shield):not(#pf-shield) li::before, .pf-bullets:not(#pf-shield):not(#pf-shield) li::before { content: ""; position: absolute; inset-inline-start: 4px; inset-block-start: .55em; inline-size: 7px; block-size: 7px; border-radius: 50%; background: currentColor; opacity: .55; }
.pf-ack:not(#pf-shield):not(#pf-shield) { display: flex; gap: var(--pf-space-2); align-items: flex-start; padding: var(--pf-space-3); border-radius: var(--pf-radius-media); border: 1px solid var(--pf-color-border); background: var(--pf-color-surface); cursor: pointer; }
.pf-ack:not(#pf-shield):not(#pf-shield):has(input:checked) { border-color: var(--pf-color-text-muted); }
.pf-ack__body:not(#pf-shield):not(#pf-shield) { display: flex; flex-direction: column; gap: 6px; min-inline-size: 0; font-size: var(--pf-text-sm); line-height: 1.5; }
.pf-ack__more:not(#pf-shield):not(#pf-shield) { display: flex; flex-direction: column; gap: 6px; padding-inline-start: calc(22px + var(--pf-space-2)); font-size: var(--pf-text-sm); color: var(--pf-color-text-muted); }
.pf-consent:not(#pf-shield):not(#pf-shield) { display: flex; flex-direction: column; gap: 0; }
.pf-consent:not(#pf-shield):not(#pf-shield) .pf-ack { border-end-end-radius: var(--pf-radius-media); }
.pf-consent__more:not(#pf-shield):not(#pf-shield) { display: flex; flex-direction: column; gap: 8px; margin-inline-start: calc(var(--pf-space-3) + 22px + var(--pf-space-2)); padding-block: var(--pf-space-2) 2px; font-size: var(--pf-text-sm); color: var(--pf-color-text-muted); line-height: 1.5; }
.pf-consent__more:not(#pf-shield):not(#pf-shield) ul { display: flex; flex-direction: column; gap: 6px; }
.pf-consent__more li:not(#pf-shield):not(#pf-shield) { position: relative; padding-inline-start: 16px; }
.pf-consent__more:not(#pf-shield):not(#pf-shield) li::before { content: ""; position: absolute; inset-inline-start: 2px; inset-block-start: .6em; inline-size: 6px; block-size: 6px; border-radius: 50%; background: currentColor; opacity: .5; }
.pf-consent__more:not(#pf-shield):not(#pf-shield) a { color: var(--pf-color-accent-text); text-decoration: underline; text-underline-offset: .2em; font-weight: 600; }
.pf-consent__details:not(#pf-shield):not(#pf-shield) { margin-inline-start: calc(var(--pf-space-3) + 22px + var(--pf-space-2)); }
.pf-consent__details:not(#pf-shield):not(#pf-shield) > .pf-consent__more { margin-inline-start: 0; padding-block: 0 var(--pf-space-2); }
.pf-consent__summary:not(#pf-shield):not(#pf-shield) { display: inline-flex; align-items: center; gap: 8px; min-block-size: 44px; cursor: pointer; list-style: none; font-size: var(--pf-text-sm); font-weight: 600; color: var(--pf-color-accent-text); text-decoration: underline; text-underline-offset: .2em; }
.pf-consent__summary:not(#pf-shield):not(#pf-shield)::-webkit-details-marker { display: none; }
.pf-consent__summary:not(#pf-shield):not(#pf-shield)::before { content: ""; inline-size: 7px; block-size: 7px; border-inline-end: 2px solid currentColor; border-block-end: 2px solid currentColor; transform: rotate(-45deg); }
.pf-consent__details[open]:not(#pf-shield):not(#pf-shield) > .pf-consent__summary::before { transform: rotate(45deg); }
.pf-consent__tag:not(#pf-shield):not(#pf-shield) { font-size: var(--pf-text-xs); font-weight: 650; color: var(--pf-color-text-muted); }

/* ---- can size picker (to scale: 1 mm = .8 px) */
.pf-cans:not(#pf-shield):not(#pf-shield) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--pf-space-3); border: 0; }
.pf-can:not(#pf-shield):not(#pf-shield) { position: relative; display: grid; grid-template-columns: auto 1fr; align-items: end; gap: var(--pf-space-3); padding: var(--pf-space-3); border: 1px solid var(--pf-color-border); border-radius: var(--pf-radius-card); background: var(--pf-color-surface); cursor: pointer; }
.pf-can:not(#pf-shield):not(#pf-shield):has(input:checked) { border-color: var(--pf-color-action); box-shadow: 0 0 0 1px var(--pf-color-action); }
.pf-can:not(#pf-shield):not(#pf-shield):has(input:focus-visible) { outline: 3px solid var(--pf-color-focus); outline-offset: 3px; }
.pf-can:not(#pf-shield):not(#pf-shield) input { position: absolute; opacity: 0; inline-size: 1px; block-size: 1px; }
.pf-can__art:not(#pf-shield):not(#pf-shield) { block-size: 136px; display: flex; align-items: flex-end; color: var(--pf-color-text); }
.pf-can__art:not(#pf-shield):not(#pf-shield) svg { display: block; max-inline-size: none; }
.pf-can__name:not(#pf-shield):not(#pf-shield) { font-weight: 700; }
.pf-can__dims:not(#pf-shield):not(#pf-shield) { font-size: var(--pf-text-sm); color: var(--pf-color-text-muted); font-variant-numeric: tabular-nums; }
.pf-can__tick:not(#pf-shield):not(#pf-shield) { position: absolute; inset-block-start: 10px; inset-inline-end: 10px; inline-size: 22px; block-size: 22px; border-radius: 50%; border: 2px solid var(--pf-color-border); display: grid; place-content: center; }
.pf-can:not(#pf-shield):not(#pf-shield):has(input:checked) .pf-can__tick { border-color: var(--pf-color-action); }
.pf-can:not(#pf-shield):not(#pf-shield):has(input:checked) .pf-can__tick::after { content: ""; inline-size: 10px; block-size: 10px; border-radius: 50%; background: var(--pf-color-action); }
@container (max-width: 420px) { .pf-can:not(#pf-shield):not(#pf-shield) { grid-template-columns: 1fr; justify-items: start; } }
.pf-scale:not(#pf-shield):not(#pf-shield) { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--pf-color-text-muted); }
.pf-scale:not(#pf-shield):not(#pf-shield) i { display: inline-block; inline-size: 40px; block-size: 6px; border: 2px solid currentColor; border-block-start: 0; }

/* ---- progress tracker (real phases, no percentages) */
.pf-tracker:not(#pf-shield):not(#pf-shield) { display: flex; flex-direction: column; }
.pf-tracker__item:not(#pf-shield):not(#pf-shield) { position: relative; display: grid; grid-template-columns: 28px 1fr; gap: 0 var(--pf-space-3); padding-block-end: var(--pf-space-4); }
.pf-tracker__item:not(#pf-shield):not(#pf-shield):last-child { padding-block-end: 0; }
.pf-tracker__item:not(#pf-shield):not(#pf-shield)::before { content: ""; position: absolute; inset-inline-start: 13px; inset-block: 28px 0; inline-size: 2px; background: var(--pf-color-divider); }
.pf-tracker__item:not(#pf-shield):not(#pf-shield):last-child::before { display: none; }
.pf-tracker__item.is-done:not(#pf-shield):not(#pf-shield)::before { background: var(--pf-color-success); }
.pf-tracker__dot:not(#pf-shield):not(#pf-shield) { inline-size: 28px; block-size: 28px; border-radius: 50%; border: 2px solid var(--pf-color-border); background: var(--pf-color-surface); display: grid; place-content: center; }
.pf-tracker__item.is-done:not(#pf-shield):not(#pf-shield) .pf-tracker__dot { background: var(--pf-color-success); border-color: var(--pf-color-success); }
.pf-tracker__item.is-done:not(#pf-shield):not(#pf-shield) .pf-tracker__dot::after { content: ""; inline-size: 6px; block-size: 11px; border: solid #fff; border-width: 0 2.5px 2.5px 0; transform: translateY(-1px) rotate(45deg); }
.pf-tracker__item.is-current:not(#pf-shield):not(#pf-shield) .pf-tracker__dot { border-color: var(--pf-color-accent); }
.pf-tracker__item.is-current:not(#pf-shield):not(#pf-shield) .pf-tracker__dot::after { content: ""; inline-size: 10px; block-size: 10px; border-radius: 50%; background: var(--pf-color-accent); animation: pf-live 1.6s ease-in-out infinite; }
@keyframes pf-live { 50% { opacity: .35; transform: scale(.8); } }
.pf-tracker__body:not(#pf-shield):not(#pf-shield) { display: flex; flex-direction: column; gap: 4px; padding-block-start: 3px; min-inline-size: 0; }
.pf-tracker__title:not(#pf-shield):not(#pf-shield) { font-weight: 700; }
.pf-tracker__item:not(.is-done):not(.is-current) .pf-tracker__title:not(#pf-shield):not(#pf-shield) { color: var(--pf-color-text-muted); font-weight: 600; }
.pf-tracker__when:not(#pf-shield):not(#pf-shield) { font-size: var(--pf-text-sm); color: var(--pf-color-text-muted); }
.pf-tracker__card:not(#pf-shield):not(#pf-shield) { margin-block-start: var(--pf-space-2); padding: var(--pf-space-3); border-radius: var(--pf-radius-media); background: var(--pf-color-accent-soft); display: flex; flex-direction: column; gap: 6px; }
.pf-tracker__thumb:not(#pf-shield):not(#pf-shield) { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: var(--pf-space-3); align-items: center; }
@container pf (max-width: 360px) { .pf-tracker__thumb:not(#pf-shield):not(#pf-shield) { grid-template-columns: minmax(0, 1fr); } }
.pf-tracker__thumb:not(#pf-shield):not(#pf-shield) img { inline-size: 84px; block-size: 84px; object-fit: cover; border-radius: 10px; flex: 0 0 auto; }

/* ---- callouts, alerts, state */
.pf-callout:not(#pf-shield):not(#pf-shield) { display: flex; gap: var(--pf-space-2); align-items: flex-start; padding: var(--pf-space-3); border-radius: var(--pf-radius-media); background: var(--pf-color-surface-2); border-inline-start: 4px solid var(--pf-color-accent); }
.pf-callout:not(#pf-shield):not(#pf-shield) > svg { flex: 0 0 auto; inline-size: 22px; block-size: 22px; color: var(--pf-color-accent-text); }
.pf-callout__body:not(#pf-shield):not(#pf-shield) { display: flex; flex-direction: column; gap: 6px; min-inline-size: 0; }
.pf-callout--ok:not(#pf-shield):not(#pf-shield) { border-inline-start-color: var(--pf-color-success); }
.pf-callout--ok:not(#pf-shield):not(#pf-shield) > svg { color: var(--pf-color-success); }
.pf-callout--warn:not(#pf-shield):not(#pf-shield) { border-inline-start-color: var(--pf-color-warning); }
.pf-callout--warn:not(#pf-shield):not(#pf-shield) > svg { color: var(--pf-color-warning); }
.pf-callout--error:not(#pf-shield):not(#pf-shield) { border-inline-start-color: var(--pf-color-danger); background: color-mix(in srgb, var(--pf-color-danger) 6%, var(--pf-color-surface)); }
.pf-callout--error:not(#pf-shield):not(#pf-shield) > svg { color: var(--pf-color-danger); }
.pf-alert:not(#pf-shield):not(#pf-shield) { display: flex; flex-direction: column; gap: var(--pf-space-2); padding: var(--pf-space-3) var(--pf-space-4); border-radius: var(--pf-radius-media); border: 1px solid color-mix(in srgb, var(--pf-color-danger) 45%, transparent); border-inline-start: 4px solid var(--pf-color-danger); background: color-mix(in srgb, var(--pf-color-danger) 6%, var(--pf-color-surface)); }
.pf-alert__title:not(#pf-shield):not(#pf-shield) { display: flex; align-items: center; gap: 8px; font-weight: 700; color: var(--pf-color-text); }
.pf-alert__title:not(#pf-shield):not(#pf-shield) svg { inline-size: 20px; block-size: 20px; color: var(--pf-color-danger); flex: 0 0 auto; }
.pf-alert:not(#pf-shield):not(#pf-shield) ul { display: flex; flex-direction: column; gap: 4px; padding-inline-start: 28px; }
.pf-alert:not(#pf-shield):not(#pf-shield) a, .pf-alert:not(#pf-shield):not(#pf-shield) button.pf-link { color: var(--pf-color-danger); font-weight: 650; text-decoration: underline; text-underline-offset: .2em; text-align: start; }
/* A question, not an error (UXR-43 swap): neutral accent, plain text. */
.pf-alert--choice:not(#pf-shield):not(#pf-shield) { border-color: color-mix(in srgb, var(--pf-color-accent) 40%, transparent); border-inline-start-color: var(--pf-color-accent); background: var(--pf-color-accent-soft); }
.pf-alert--choice:not(#pf-shield):not(#pf-shield) ul { padding-inline-start: 0; list-style: none; }
.pf-alert--choice:not(#pf-shield):not(#pf-shield) button.pf-link { color: var(--pf-color-text); text-decoration: none; font-weight: 600; cursor: default; }
.pf-state:not(#pf-shield):not(#pf-shield) { display: flex; flex-direction: column; align-items: flex-start; gap: var(--pf-space-3); }
.pf-state__icon:not(#pf-shield):not(#pf-shield) { inline-size: 52px; block-size: 52px; border-radius: 50%; display: grid; place-content: center; background: var(--pf-color-accent-soft); color: var(--pf-color-accent-text); }
.pf-state__icon:not(#pf-shield):not(#pf-shield) svg { inline-size: 26px; block-size: 26px; }
.pf-state__icon--ok:not(#pf-shield):not(#pf-shield) { background: color-mix(in srgb, var(--pf-color-success) 12%, var(--pf-color-surface)); color: var(--pf-color-success); }
.pf-state__icon--warn:not(#pf-shield):not(#pf-shield) { background: color-mix(in srgb, var(--pf-color-warning) 12%, var(--pf-color-surface)); color: var(--pf-color-warning); }
.pf-state__icon--muted:not(#pf-shield):not(#pf-shield) { background: var(--pf-color-surface-2); color: var(--pf-color-text-muted); }
.pf-staff:not(#pf-shield):not(#pf-shield) { display: flex; gap: 10px; align-items: center; padding: 8px 12px; border-radius: 8px; font-size: var(--pf-text-sm); font-weight: 600; color: var(--pf-color-text); background: repeating-linear-gradient(-45deg, color-mix(in srgb, var(--pf-color-warning) 12%, var(--pf-color-surface)) 0 10px, var(--pf-color-surface) 10px 20px); border: 1px dashed var(--pf-color-warning); }
.pf-staff:not(#pf-shield):not(#pf-shield) b { font-weight: 800; letter-spacing: .06em; color: var(--pf-color-warning); }
.pf-ticks:not(#pf-shield):not(#pf-shield) { display: flex; flex-direction: column; gap: 6px; }
.pf-ticks li:not(#pf-shield):not(#pf-shield) { display: grid; grid-template-columns: 20px 1fr; gap: 6px; font-size: var(--pf-text-sm); }
.pf-ticks:not(#pf-shield):not(#pf-shield) li::before { content: "\2713"; font-weight: 800; color: var(--pf-color-success); }
.pf-steps-list:not(#pf-shield):not(#pf-shield) { display: flex; flex-direction: column; gap: var(--pf-space-2); counter-reset: pf-n; }
.pf-steps-list li:not(#pf-shield):not(#pf-shield) { position: relative; display: grid; grid-template-columns: 28px 1fr; gap: var(--pf-space-2); align-items: start; font-size: var(--pf-text-sm); counter-increment: pf-n; }
.pf-steps-list:not(#pf-shield):not(#pf-shield) li::before { content: counter(pf-n); inline-size: 26px; block-size: 26px; border-radius: 50%; display: grid; place-content: center; font-weight: 750; font-size: 12.5px; background: var(--pf-color-accent-soft); color: var(--pf-color-accent-text); font-variant-numeric: tabular-nums; }
.pf-steps-list li:not(#pf-shield):not(#pf-shield) > span { padding-block-start: 3px; }

/* ---- terms / disclosure box (s.54.4) */
.pf-terms:not(#pf-shield):not(#pf-shield) { display: flex; flex-direction: column; gap: var(--pf-space-2); font-size: var(--pf-text-sm); line-height: 1.55; }
.pf-terms:not(#pf-shield):not(#pf-shield) :is(p, li) { font-size: var(--pf-text-sm); }
.pf-terms:not(#pf-shield):not(#pf-shield) ul { display: flex; flex-direction: column; gap: 6px; }
.pf-terms li:not(#pf-shield):not(#pf-shield) { position: relative; padding-inline-start: 20px; }
.pf-terms:not(#pf-shield):not(#pf-shield) li::before { content: "\2713"; position: absolute; inset-inline-start: 0; font-weight: 800; color: var(--pf-color-success); }
.pf-terms:not(#pf-shield):not(#pf-shield) a { color: var(--pf-color-accent-text); text-decoration: underline; text-underline-offset: .2em; font-weight: 600; }
.pf-terms:not(#pf-shield):not(#pf-shield) strong { font-weight: 700; color: var(--pf-color-text); }
.pf-terms-box:not(#pf-shield):not(#pf-shield) { display: flex; flex-direction: column; gap: var(--pf-space-3); min-inline-size: 0; }
.pf-terms-box:not(#pf-shield):not(#pf-shield) > .pf-terms-slot { padding: var(--pf-space-3) var(--pf-space-4); border-radius: var(--pf-radius-media); background: var(--pf-color-surface-2); }
.pf-terms-box:not(#pf-shield):not(#pf-shield) .pf-terms__total { font-weight: 700; color: var(--pf-color-text); }
.pf-terms-box:not(#pf-shield):not(#pf-shield) .pf-terms__note, .pf-terms-box:not(#pf-shield):not(#pf-shield) .pf-terms__merchant { color: var(--pf-color-text-muted); }

/* ---- 3D stage (viewer chrome is L4's; these are the host and its notes) */
.pf-viewer-slot:not(#pf-shield):not(#pf-shield):has(> .pf-viewer-host:empty):has(> .pf-viewer[hidden]) { min-block-size: min(72vh, 440px); } /* UIR-05: the viewer's stage is reserved before it mounts */
.pf-viewer:not(#pf-shield):not(#pf-shield) { display: flex; flex-direction: column; border-radius: var(--pf-radius-card); overflow: hidden; background: var(--pf-stage-2); color: var(--pf-stage-ink); min-inline-size: 0; }
.pf-stage:not(#pf-shield):not(#pf-shield) { position: relative; aspect-ratio: 4 / 4.4; max-block-size: min(72vh, 620px); inline-size: 100%; overflow: hidden; color: var(--pf-stage-ink); background: radial-gradient(120% 90% at 50% 35%, var(--pf-stage-1), var(--pf-stage-2)); color-scheme: dark; display: grid; place-items: center; }
@container pf (min-width: 960px) { .pf-stage:not(#pf-shield):not(#pf-shield) { aspect-ratio: 5 / 4.4; } }
.pf-stage:not(#pf-shield):not(#pf-shield) model-viewer { inline-size: 100%; block-size: 100%; --poster-color: transparent; background: transparent; }
.pf-stage__host:not(#pf-shield):not(#pf-shield) { position: absolute; inset: 0; display: flex; flex-direction: column; }
.pf-stage__msg:not(#pf-shield):not(#pf-shield) { position: relative; display: flex; flex-direction: column; align-items: center; gap: var(--pf-space-2); max-inline-size: 34ch; padding: var(--pf-space-4); text-align: center; color: var(--pf-stage-ink); font-size: var(--pf-text-sm); }
.pf-stage__msg:not(#pf-shield):not(#pf-shield) svg { inline-size: 40px; block-size: 40px; opacity: .8; }
.pf-stage__msg:not(#pf-shield):not(#pf-shield) .pf-btn--secondary { color: var(--pf-stage-ink); border-color: rgb(255 255 255 / .55); }
.pf-stage__notes:not(#pf-shield):not(#pf-shield) { display: flex; flex-wrap: wrap; gap: 6px 16px; padding: 12px; font-size: 13px; color: rgb(255 255 255 / .86); border-block-start: 1px solid rgb(255 255 255 / .1); }
.pf-stage__notes span:not(#pf-shield):not(#pf-shield) { display: inline-flex; align-items: center; gap: 8px; color: rgb(255 255 255 / .86); }
.pf-stage__swatch:not(#pf-shield):not(#pf-shield) { inline-size: 14px; block-size: 14px; border-radius: 50%; background: #a89c8a; border: 1px solid rgb(255 255 255 / .5); flex: 0 0 auto; }
.pf-seg:not(#pf-shield):not(#pf-shield) { display: inline-flex; padding: 3px; gap: 2px; border-radius: 999px; background: rgb(0 0 0 / .5); border: 1px solid rgb(255 255 255 / .16); }
.pf-seg button:not(#pf-shield):not(#pf-shield) { min-block-size: 38px; min-inline-size: 44px; padding: 0 12px; border-radius: 999px; border: 0; background: transparent; color: var(--pf-stage-ink); font: inherit; font-size: 13.5px; font-weight: 650; cursor: pointer; }
.pf-seg button[aria-pressed="true"]:not(#pf-shield):not(#pf-shield) { background: var(--pf-stage-ink); color: #111117; }

/* ---- concept + references beside the stage */
.pf-gallery:not(#pf-shield):not(#pf-shield) { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--pf-space-2); }
.pf-gallery:not(#pf-shield):not(#pf-shield) figure { display: flex; flex-direction: column; gap: 6px; min-inline-size: 0; }
.pf-gallery:not(#pf-shield):not(#pf-shield) figure > :first-child { position: relative; aspect-ratio: 1; border-radius: var(--pf-radius-media); overflow: hidden; background: var(--pf-color-surface-2); border: 1px solid var(--pf-color-divider); display: grid; place-content: center; color: var(--pf-color-text-muted); }
.pf-gallery:not(#pf-shield):not(#pf-shield) img { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; max-inline-size: none; object-fit: cover; }
.pf-gallery:not(#pf-shield):not(#pf-shield) figure > :first-child > svg { inline-size: 36px; block-size: 36px; }
.pf-gallery figcaption:not(#pf-shield):not(#pf-shield) { font-size: 12.5px; color: var(--pf-color-text-muted); line-height: 1.3; }
.pf-concept:not(#pf-shield):not(#pf-shield) { position: relative; inline-size: 100%; max-inline-size: 560px; aspect-ratio: 1; border-radius: var(--pf-radius-card); overflow: hidden; background: var(--pf-stage-2); display: grid; place-content: center; color: var(--pf-stage-ink); }
.pf-concept:not(#pf-shield):not(#pf-shield) img { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; max-inline-size: none; object-fit: contain; }
.pf-concept:not(#pf-shield):not(#pf-shield) > svg { inline-size: 48px; block-size: 48px; opacity: .6; }

/* ---- approval checklist + decision */
.pf-checklist:not(#pf-shield):not(#pf-shield) { display: grid; gap: 2px; }
.pf-checklist label:not(#pf-shield):not(#pf-shield) { display: flex; gap: 10px; align-items: center; min-block-size: var(--pf-target); padding-inline: 4px; cursor: pointer; font-size: var(--pf-text-body); }
.pf-decision:not(#pf-shield):not(#pf-shield) { display: grid; gap: var(--pf-space-2); }
.pf-decision__alt:not(#pf-shield):not(#pf-shield) { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); gap: var(--pf-space-2); }
.pf-confirm:not(#pf-shield):not(#pf-shield) { display: flex; flex-direction: column; gap: var(--pf-space-3); padding: var(--pf-space-3); border-radius: var(--pf-radius-media); border: 1px solid var(--pf-color-border); background: var(--pf-color-surface-2); }

/* ---- order summary */
.pf-order:not(#pf-shield):not(#pf-shield) { display: grid; gap: var(--pf-space-3); }
.pf-order__item:not(#pf-shield):not(#pf-shield) { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: var(--pf-space-3); align-items: center; }
.pf-order__item:not(#pf-shield):not(#pf-shield) > :first-child { position: relative; inline-size: 64px; block-size: 64px; border-radius: 10px; overflow: hidden; background: var(--pf-stage-2); display: grid; place-content: center; color: var(--pf-stage-ink); }
.pf-order__item:not(#pf-shield):not(#pf-shield) > :first-child svg { inline-size: 30px; block-size: 30px; }
.pf-order__item:not(#pf-shield):not(#pf-shield) img { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; max-inline-size: none; object-fit: cover; }
.pf-order__meta:not(#pf-shield):not(#pf-shield) { font-size: var(--pf-text-sm); color: var(--pf-color-text-muted); }

/* ---- portal header, ref, list */
.pf-back:not(#pf-shield):not(#pf-shield) { display: inline-flex; align-items: center; gap: 6px; min-block-size: var(--pf-target); font-size: var(--pf-text-sm); font-weight: 650; color: var(--pf-color-text); text-decoration: none; background: none; border: 0; padding: 0; cursor: pointer; }
.pf-back:not(#pf-shield):not(#pf-shield):hover { text-decoration: underline; text-underline-offset: .2em; }
.pf-back:not(#pf-shield):not(#pf-shield) svg { inline-size: 16px; block-size: 16px; }
.pf-back:not(#pf-shield):not(#pf-shield) svg:dir(rtl), [dir="rtl"] .pf-back:not(#pf-shield):not(#pf-shield) svg { transform: scaleX(-1); }
.pf-ref:not(#pf-shield):not(#pf-shield) { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; font-size: var(--pf-text-sm); color: var(--pf-color-text-muted); font-variant-numeric: tabular-nums; }
.pf-copy:not(#pf-shield):not(#pf-shield) { display: inline-flex; align-items: center; gap: 6px; min-block-size: var(--pf-target); padding: 0 10px; border: 0; border-radius: var(--pf-radius-control); background: none; color: var(--pf-color-text); font: inherit; font-size: var(--pf-text-sm); font-weight: 650; cursor: pointer; font-variant-numeric: tabular-nums; }
.pf-copy:not(#pf-shield):not(#pf-shield):hover { background: var(--pf-color-surface-2); }
.pf-copy:not(#pf-shield):not(#pf-shield) svg { inline-size: 16px; block-size: 16px; color: var(--pf-color-text-muted); }
.pf-cards:not(#pf-shield):not(#pf-shield) { display: flex; flex-direction: column; gap: var(--pf-space-3); }
.pf-card:not(#pf-shield):not(#pf-shield) { position: relative; display: grid; grid-template-columns: 72px minmax(0, 1fr) auto; gap: var(--pf-space-3); align-items: center; padding: var(--pf-space-3); border: 1px solid var(--pf-color-divider); border-radius: var(--pf-radius-card); background: var(--pf-color-surface); box-shadow: var(--pf-shadow-card); transition: border-color .15s ease, box-shadow .15s ease; }
.pf-card:not(#pf-shield):not(#pf-shield):hover { border-color: var(--pf-color-border); }
/* UIR-14: the whole card is the link (the title's link stretched over the card); no button per card. */
.pf-card__link:not(#pf-shield):not(#pf-shield) { color: inherit; text-decoration: none; }
.pf-card__link:not(#pf-shield):not(#pf-shield)::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.pf-card:not(#pf-shield):not(#pf-shield):hover .pf-card__link { text-decoration: underline; text-underline-offset: .2em; }
.pf-card__link:not(#pf-shield):not(#pf-shield):focus-visible { outline: none; }
.pf-card:not(#pf-shield):not(#pf-shield):has(.pf-card__link:focus-visible) { outline: 3px solid var(--pf-color-focus); outline-offset: 3px; }
.pf-card__next:not(#pf-shield):not(#pf-shield) { display: inline-flex; align-items: center; gap: 4px; min-block-size: var(--pf-target); min-inline-size: 0; font-size: var(--pf-text-sm); font-weight: 650; color: var(--pf-color-text-muted); }
.pf-card__next:not(#pf-shield):not(#pf-shield) > span { min-inline-size: 0; text-wrap: balance; } /* UIR-33: long FR labels wrap; the chevron stays */
.pf-card__next:not(#pf-shield):not(#pf-shield) svg { inline-size: 16px; block-size: 16px; flex: none; }
.pf-card__next:not(#pf-shield):not(#pf-shield) svg:dir(rtl), [dir="rtl"] .pf-card__next:not(#pf-shield):not(#pf-shield) svg { transform: scaleX(-1); }
.pf-card--action:not(#pf-shield):not(#pf-shield) { border-inline-start: 4px solid var(--pf-color-action); }
.pf-card--action:not(#pf-shield):not(#pf-shield) .pf-card__next { color: var(--pf-color-text); }
.pf-card__thumb:not(#pf-shield):not(#pf-shield) { position: relative; inline-size: 72px; block-size: 72px; border-radius: var(--pf-radius-media); overflow: hidden; display: grid; place-content: center; background: radial-gradient(circle at 50% 35%, var(--pf-stage-1), var(--pf-stage-2)); color: var(--pf-stage-ink); }
.pf-card__thumb:not(#pf-shield):not(#pf-shield) img { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; max-inline-size: none; object-fit: cover; }
.pf-card__thumb:not(#pf-shield):not(#pf-shield) svg { inline-size: 32px; block-size: 32px; opacity: .85; }
.pf-card__body:not(#pf-shield):not(#pf-shield) { display: flex; flex-direction: column; gap: 4px; min-inline-size: 0; }
.pf-card__title:not(#pf-shield):not(#pf-shield) { font-weight: 700; font-size: var(--pf-text-body); line-height: 1.3; }
.pf-card__meta:not(#pf-shield):not(#pf-shield) { font-size: var(--pf-text-sm); color: var(--pf-color-text-muted); }
.pf-card__status:not(#pf-shield):not(#pf-shield) { display: inline-flex; align-items: center; gap: 6px; font-size: var(--pf-text-sm); font-weight: 650; color: var(--pf-color-text); }
.pf-card__status:not(#pf-shield):not(#pf-shield)::before { content: ""; inline-size: 8px; block-size: 8px; border-radius: 50%; background: var(--pf-dot, var(--pf-color-text-muted)); flex: 0 0 auto; }
.pf-card--action:not(#pf-shield):not(#pf-shield) { --pf-dot: var(--pf-color-action); }
.pf-card--working:not(#pf-shield):not(#pf-shield) { --pf-dot: var(--pf-color-accent); }
.pf-card--done:not(#pf-shield):not(#pf-shield) { --pf-dot: var(--pf-color-success); }
@container pf (max-width: 599px) {
	.pf-card:not(#pf-shield):not(#pf-shield) { grid-template-columns: 64px minmax(0, 1fr); }
	.pf-card__thumb:not(#pf-shield):not(#pf-shield) { inline-size: 64px; block-size: 64px; }
	.pf-card__next:not(#pf-shield):not(#pf-shield) { grid-column: 2; min-block-size: 0; }
}
/* UIR-17: the back link and the reference share one row on phones (the copy label becomes the icon's name). */
.pf-detail-head:not(#pf-shield):not(#pf-shield) { row-gap: 0; }
.pf-detail-head:not(#pf-shield):not(#pf-shield) .pf-ref { margin-inline-start: auto; }
@container pf (max-width: 479px) {
	.pf-detail-head:not(#pf-shield):not(#pf-shield) .pf-copy > span { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
	.pf-detail-head:not(#pf-shield):not(#pf-shield) .pf-copy { padding: 0 8px; min-inline-size: var(--pf-target); justify-content: center; }
}
/* UIR-05: a detail-shaped placeholder while ?request= loads, so the page does not jump. */
.pf-loading--detail:not(#pf-shield):not(#pf-shield) { min-block-size: min(70vh, 900px); }
.pf-skeleton--line:not(#pf-shield):not(#pf-shield) { block-size: var(--pf-target); inline-size: min(40%, 220px); }
.pf-skeleton--title:not(#pf-shield):not(#pf-shield) { block-size: 2.4rem; inline-size: min(75%, 520px); }
.pf-skeleton--stage:not(#pf-shield):not(#pf-shield) { block-size: auto; aspect-ratio: 4 / 4.4; max-block-size: min(60vh, 620px); }
.pf-skeleton:not(#pf-shield):not(#pf-shield) { block-size: 96px; border-radius: var(--pf-radius-card); background: linear-gradient(90deg, var(--pf-color-surface-2), color-mix(in srgb, var(--pf-color-surface-2) 60%, var(--pf-color-surface)), var(--pf-color-surface-2)); background-size: 200% 100%; animation: pf-shimmer 1.4s ease-in-out infinite; }
@keyframes pf-shimmer { to { background-position: -200% 0; } }

/* ---- motion: step reveal; nothing moves under reduced motion */
.pf-reveal:not(#pf-shield):not(#pf-shield) { animation: pf-in .28s var(--pf-ease) both; }
@keyframes pf-in { from { opacity: 0; transform: translateY(6px); } }
@media (prefers-reduced-motion: reduce) {
	.pf-design:not(#pf-shield):not(#pf-shield):not(#pf-shield):not(#pf-shield) *, .pf-design:not(#pf-shield):not(#pf-shield):not(#pf-shield):not(#pf-shield) *::before, .pf-design:not(#pf-shield):not(#pf-shield):not(#pf-shield):not(#pf-shield) *::after { animation: none; transition: none; scroll-behavior: auto; }
	.pf-design:not(#pf-shield):not(#pf-shield):not(#pf-shield):not(#pf-shield) .pf-btn[aria-busy="true"]::after { border-inline-end-color: currentColor; opacity: .6; }
}

/* ---- print: the review summary as a keepable record (CPA s.54.4 printable form) */
@media print {
	.pf-design:not(#pf-shield):not(#pf-shield) .pf-steps, .pf-design:not(#pf-shield):not(#pf-shield) .pf-btn, .pf-design:not(#pf-shield):not(#pf-shield) .pf-actions, .pf-design:not(#pf-shield):not(#pf-shield) .pf-noprint, .pf-design:not(#pf-shield):not(#pf-shield) .pf-thumb__remove { display: none; }
	.pf-design:not(#pf-shield):not(#pf-shield) .pf-panel, .pf-design:not(#pf-shield):not(#pf-shield) .pf-fidelity { box-shadow: none; border-color: #999; break-inside: avoid; }
	.pf-design:not(#pf-shield):not(#pf-shield) .pf-split { grid-template-columns: minmax(0, 1fr); }
	.pf-summary:not(#pf-shield):not(#pf-shield) { position: static; }
}