/* RBFA Play 2 — component styles. Every value reads a tokens.json custom property; the fallback is the same value. No fonts are loaded here: the @font-face rules come from tokens.json type.fonts (files in fonts/), so an app self-hosts them. */
.pf, .pf * { box-sizing: border-box; }
.pf { font-family: var(--font-sans, "IBM Plex Sans", system-ui, sans-serif); font-size: 14px; line-height: 20px; color: var(--neutral-900, #1a1a1a); }
.pf-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.pf-col { display: flex; flex-direction: column; gap: 12px; }
.pf-id { font-family: var(--font-mono, "JetBrains Mono", ui-monospace, monospace); font-weight: 700; color: var(--brand-burgundy, #4b0a1f); }
.pf-svg { display: block; flex: none; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; }

/* Button */
.pf-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 36px; border-radius: var(--radius-md, 8px); font: inherit; font-size: 14px; font-weight: 600; white-space: nowrap; cursor: pointer; }
.pf-btn--primary { padding: 0 14px; border: 0; background: linear-gradient(90deg, var(--brand-gradient-from, #fa0000), var(--brand-gradient-to, #ff2e83)); color: var(--neutral-0, #fff); }
.pf-btn--secondary { padding: 0 12px; border: 1px solid var(--neutral-300, #d8d4c8); background: var(--neutral-0, #fff); color: var(--neutral-900, #1a1a1a); }
.pf-btn--secondary[aria-pressed="true"] { background: var(--brand-sand, #f6f3eb); }
.pf-btn--outline { padding: 0 14px; border: 1px solid var(--brand-gold, #b69b56); background: var(--neutral-0, #fff); color: var(--brand-gold-outline-ink, #6e5a26); }
.pf-btn--ghost { padding: 0 10px; border: 0; background: transparent; color: var(--brand-burgundy, #4b0a1f); }
.pf-btn--icon { width: 36px; padding: 0; border: 1px solid var(--neutral-300, #d8d4c8); background: var(--neutral-0, #fff); color: var(--neutral-900, #1a1a1a); }
.pf-btn:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--brand-gold, #b69b56), var(--focus-ring, 0 0 0 3px rgba(182,155,86,.22)); }
.pf-btn .pf-badge { min-width: 18px; height: 18px; padding: 0 5px; background: var(--brand-burgundy, #4b0a1f); color: var(--neutral-0, #fff); }
.pf-btn--icon .pf-badge { position: absolute; top: -7px; right: -7px; border: 2px solid var(--neutral-0, #fff); }

/* Badge (count) */
.pf-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: var(--radius-pill, 999px); font-size: 14px; font-weight: 700; line-height: 1; }
.pf-badge--neutral { background: var(--neutral-100, #efeee9); color: var(--neutral-800, #3a3935); }
.pf-badge--new { background: var(--feedback-new-bg, #ffe3e3); color: var(--feedback-new, #9e1a1a); }
.pf-badge--brand { background: var(--brand-burgundy, #4b0a1f); color: var(--neutral-0, #fff); }
.pf-badge--oncolor { background: var(--neutral-0, #fff); color: var(--feedback-alert, #c8001e); box-shadow: var(--badge-on-color, 0 1px 3px rgba(0,0,0,.18)); }
.pf-badge--alert { background: var(--feedback-alert, #c8001e); color: var(--neutral-0, #fff); border: 2px solid var(--neutral-0, #fff); }

/* Chip */
.pf-chip { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 14px; border: 1px solid var(--neutral-300, #d8d4c8); border-radius: var(--radius-pill, 999px); background: var(--neutral-0, #fff); color: var(--neutral-900, #1a1a1a); font: inherit; font-weight: 600; white-space: nowrap; cursor: pointer; }
.pf-chip[aria-pressed="true"] { border-color: var(--brand-gradient-from, #fa0000); background: var(--feedback-chip-selected-bg, #fff0f0); color: var(--feedback-danger, #b30000); }
.pf-chip .pf-badge { min-width: 18px; height: 18px; padding: 0 5px; background: var(--neutral-100, #efeee9); color: var(--neutral-800, #3a3935); }
.pf-chip[aria-pressed="true"] .pf-badge { background: var(--feedback-chip-selected-count, #ffd6d6); color: var(--feedback-new, #9e1a1a); }
.pf-chip--id { height: 22px; padding: 0 7px; gap: 0; border-radius: var(--radius-xs, 4px); background: var(--neutral-50, #f7f6f4); color: var(--neutral-800, #3a3935); font-family: var(--font-mono, "JetBrains Mono", ui-monospace, monospace); font-weight: 700; cursor: default; }

/* Checkbox card */
.pf-check { display: flex; align-items: flex-start; gap: 14px; width: 100%; padding: 14px 16px; border: 1px solid var(--neutral-200, #e4e1d8); border-radius: var(--radius-lg, 10px); background: var(--neutral-0, #fff); font: inherit; text-align: left; cursor: pointer; }
.pf-check__box { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; margin-top: 1px; border: 1.5px solid var(--neutral-400, #c9c5ba); border-radius: 5px; background: var(--neutral-0, #fff); color: var(--neutral-0, #fff); }
.pf-check__box svg { visibility: hidden; }
.pf-check[aria-checked="true"] { border-color: var(--brand-gold, #b69b56); background: var(--brand-gold-tint, #fbf4e6); }
.pf-check[aria-checked="true"] .pf-check__box { border-color: var(--brand-gold, #b69b56); background: var(--brand-gold, #b69b56); }
.pf-check[aria-checked="true"] .pf-check__box svg { visibility: visible; }
.pf-check__title { display: block; font-size: 15px; line-height: 20px; font-weight: 700; color: var(--neutral-900, #1a1a1a); }
.pf-check__desc { display: block; margin-top: 2px; font-size: 14px; line-height: 19px; font-weight: 400; color: var(--neutral-500, #8c8a83); }
.pf-check--sm { gap: 10px; padding: 7px 10px; border-radius: var(--radius-md, 8px); }
.pf-check--sm .pf-check__box { width: 18px; height: 18px; border-radius: var(--radius-xs, 4px); }
.pf-check--sm .pf-check__title { font-size: 14px; line-height: 19px; }

/* StatusPill */
.pf-pill { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; height: 24px; padding: 0 9px 0 7px; border: 1px solid; border-radius: var(--radius-pill, 999px); font-size: 14px; font-weight: 700; white-space: nowrap; }
.pf-pill > span { overflow: hidden; text-overflow: ellipsis; }
.pf-pill--md { height: 28px; padding: 0 12px 0 9px; }
.pf-pill--draft { border-color: var(--category-draft, #8c8a83); background: var(--category-draft-bg, #f4f3f3); color: var(--category-draft-fg, #5b5a55); }
.pf-pill--prepare { border-color: var(--category-prepare, #b69b56); background: var(--category-prepare-bg, #f8f5ee); color: var(--category-prepare-fg, #766538); }
.pf-pill--deliver { border-color: var(--category-deliver, #2349d1); background: var(--category-deliver-bg, #e9edfa); color: var(--category-deliver-fg, #172f88); }
.pf-pill--release { border-color: var(--category-release, #2e8b47); background: var(--category-release-bg, #eaf3ed); color: var(--category-release-fg, #1e5a2e); }
.pf-pill--done { border-color: var(--category-done, #5dbb2f); background: var(--category-done-bg, #eff8ea); color: var(--category-done-fg, #3c7a1f); }
.pf-pill--rejected { border-color: var(--category-rejected, #e00000); background: var(--category-rejected-bg, #fce6e6); color: var(--category-rejected-fg, #920000); }
.pf-pill--draft .pf-svg { color: var(--category-draft, #8c8a83); }
.pf-pill--prepare .pf-svg { color: var(--category-prepare, #b69b56); }
.pf-pill--deliver .pf-svg { color: var(--category-deliver, #2349d1); }
.pf-pill--release .pf-svg { color: var(--category-release, #2e8b47); }
.pf-pill--done .pf-svg { color: var(--category-done, #5dbb2f); }
.pf-pill--rejected .pf-svg { color: var(--category-rejected, #e00000); }

/* StateBadge */
.pf-state { display: inline-flex; align-items: center; gap: 6px; vertical-align: middle; }
.pf-state__dot { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 14px; height: 14px; border: 2px solid var(--neutral-0, #fff); border-radius: var(--radius-pill, 999px); }
.pf-state__dot--lg { width: 20px; height: 20px; }
.pf-state__label { font-size: 14px; font-weight: 600; white-space: nowrap; }
.pf-state--waiting .pf-state__dot { background: var(--state-waiting, #d97a00); } .pf-state--waiting .pf-state__label { color: var(--state-waiting-text, #9a5600); }
.pf-state--working .pf-state__dot { background: var(--state-working, #2e7dd1); } .pf-state--working .pf-state__label { color: var(--state-working-text, #0b4f8a); }
.pf-state--pending .pf-state__dot { background: var(--state-pending, #8c8a83); } .pf-state--pending .pf-state__label { color: var(--state-pending-text, #5d5c58); }
.pf-state--done .pf-state__dot { background: var(--state-done, #2e8b47); } .pf-state--done .pf-state__label { color: var(--state-done-text, #2f6b18); }

/* ImpactMeter */
.pf-impact { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 9px; border-radius: var(--radius-pill, 999px); font-size: 14px; font-weight: 700; white-space: nowrap; }
.pf-impact__bars { display: inline-flex; align-items: flex-end; gap: 1.5px; height: 10px; }
.pf-impact__bars i { width: 3px; border-radius: 1px; background: color-mix(in srgb, var(--mix-ink, #000) 15%, transparent); }
.pf-impact__bars i:nth-child(1) { height: 5px; } .pf-impact__bars i:nth-child(2) { height: 7px; } .pf-impact__bars i:nth-child(3) { height: 9px; } .pf-impact__bars i:nth-child(4) { height: 11px; }
.pf-impact__bars i.on { background: currentColor; }
.pf-impact--blocker { background: var(--impact-blocker-bg, #ffeded); color: var(--impact-blocker, #9e1a1a); }
.pf-impact--major { background: var(--impact-major-bg, #fff4e0); color: var(--impact-major, #b35c00); }
.pf-impact--minor { background: var(--impact-minor-bg, #f6efdc); color: var(--impact-minor, #6f5a1e); }
.pf-impact--minimal { background: var(--impact-minimal-bg, #efeee9); color: var(--impact-minimal, #5d5c58); }

/* Avatar — set --ring on the element; fill and ink are mixed from it */
.pf-avatar { --ring: var(--category-prepare, #b69b56); position: relative; flex: none; display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border: 2px solid var(--ring); font-size: 9px; font-weight: 700; line-height: 1; vertical-align: middle; }
.pf-avatar--agent { border-radius: 6px; background: color-mix(in srgb, var(--ring) 20%, var(--neutral-0, #fff)); color: color-mix(in srgb, var(--ring) 65%, var(--mix-ink, #000)); margin: 0 4px; }
.pf-avatar--agent::before { content: ""; position: absolute; left: 50%; top: -6px; width: 2px; height: 5px; margin-left: -1px; background: var(--ring); }
.pf-avatar--agent::after { content: ""; position: absolute; left: 50%; top: -10px; width: 5px; height: 5px; margin-left: -2.5px; border-radius: 999px; background: var(--ring); }
.pf-avatar__ear { position: absolute; top: 30%; width: 3px; height: 40%; background: var(--ring); }
.pf-avatar__ear--l { left: -5px; border-radius: 3px 0 0 3px; } .pf-avatar__ear--r { right: -5px; border-radius: 0 3px 3px 0; }
.pf-avatar--human { --ring: var(--human-ring, #e00000); border-radius: var(--radius-pill, 999px); background: color-mix(in srgb, var(--ring) 12%, var(--neutral-0, #fff)); color: color-mix(in srgb, var(--ring) 75%, var(--mix-ink, #000)); }
.pf-avatar--empty { border-style: dotted; background: var(--neutral-0, #fff); color: var(--ring); }
.pf-avatar--lg { width: 34px; height: 34px; font-size: 12px; }
.pf-avatar--lg.pf-avatar--agent { border-radius: var(--radius-lg, 10px); }
.pf-avatar .pf-state__dot { position: absolute; right: -4px; bottom: -4px; }
.pf-named { display: inline-flex; align-items: center; gap: 7px; padding: 2px 10px 2px 2px; border: 1px solid var(--neutral-200, #e4e1d8); border-radius: var(--radius-pill, 999px); background: var(--neutral-0, #fff); font-weight: 600; white-space: nowrap; }

/* SearchField */
.pf-search { position: relative; display: flex; align-items: center; width: 100%; }
.pf-search .pf-svg { position: absolute; left: 10px; color: var(--neutral-500, #8c8a83); }
.pf-search input { width: 100%; height: 36px; padding: 0 12px 0 34px; border: 1px solid var(--neutral-300, #d8d4c8); border-radius: var(--radius-md, 8px); background: var(--neutral-0, #fff); font: inherit; color: var(--neutral-900, #1a1a1a); }
.pf-search input::placeholder { color: var(--neutral-600, #6b6963); }
.pf-search input:focus { outline: none; border: 2px solid var(--brand-gold, #b69b56); padding-left: 33px; box-shadow: var(--focus-ring, 0 0 0 3px rgba(182,155,86,.22)); }

/* SegmentedControl */
.pf-seg { display: inline-flex; padding: 2px; border: 1px solid var(--neutral-300, #d8d4c8); border-radius: var(--radius-md, 8px); background: var(--neutral-0, #fff); }
.pf-seg button { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border: 0; border-radius: var(--radius-sm, 6px); background: transparent; color: var(--neutral-700, #5d5c58); font: inherit; font-weight: 600; cursor: pointer; }
.pf-seg button[aria-pressed="true"] { background: var(--brand-burgundy, #4b0a1f); color: var(--neutral-0, #fff); }
.pf-seg button[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }

/* Tabs */
.pf-tabs { display: flex; gap: 4px; overflow-x: auto; border-bottom: 1px solid var(--neutral-200, #e4e1d8); }
.pf-tabs__sep { align-self: center; flex: none; width: 1px; height: 16px; background: var(--neutral-300, #d8d4c8); }
.pf-tab { display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 10px; margin-bottom: -1px; border: 0; border-bottom: 2px solid transparent; border-radius: 6px 6px 0 0; background: transparent; color: var(--neutral-700, #5d5c58); font: inherit; font-weight: 500; white-space: nowrap; cursor: pointer; transition: background .12s, border-color .12s; }
.pf-tab:hover { background: var(--brand-sand, #f6f3eb); border-bottom-color: var(--brand-sand-underline, #d8b9a0); color: var(--neutral-900, #1a1a1a); }
.pf-tab[aria-current="page"] { border-bottom-color: var(--brand-gradient-from, #fa0000); background: transparent; color: var(--neutral-900, #1a1a1a); font-weight: 600; }
.pf-tab .pf-badge { height: 18px; font-weight: 600; background: var(--neutral-100, #efeee9); color: var(--neutral-800, #3a3935); }

/* Breadcrumb + PageHeader */
.pf-crumbs { display: flex; align-items: center; gap: 8px; }
.pf-crumbs a { font-weight: 600; text-decoration: none; color: var(--neutral-700, #5d5c58); }
.pf-crumbs a:hover { color: var(--neutral-900, #1a1a1a); text-decoration: underline; }
.pf-crumbs .pf-svg { color: var(--neutral-500, #8c8a83); }
.pf-crumbs [aria-current="page"] { font-weight: 700; color: var(--brand-burgundy, #4b0a1f); }
.pf-header { display: flex; align-items: center; gap: 8px 24px; min-height: 52px; padding: 0 24px; background: var(--neutral-0, #fff); border-bottom: 1px solid var(--neutral-300, #d8d4c8); }

/* RefLink */
.pf-ref { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; height: 24px; padding: 0 9px; border: 1px solid var(--neutral-200, #e4e1d8); border-radius: var(--radius-sm, 6px); background: var(--neutral-50, #f7f6f4); text-decoration: none; color: var(--neutral-800, #3a3935); }
.pf-ref .pf-svg { color: var(--brand-burgundy, #4b0a1f); }
.pf-ref__title { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.pf-ref:hover { border-color: var(--brand-gold, #b69b56); }

/* AttributeCluster: the wrapper is a size container, so the layout follows the space it gets, not the screen */
.pf-attrs { container: pf-attrs / inline-size; min-width: 0; }
.pf-attrs__grid { margin: 0; display: grid; grid-template-columns: repeat(var(--attrs-cols, 4), minmax(0, 1fr)); gap: 12px 0; }
.pf-attrs__cluster { display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 0 20px; border-left: 1px solid var(--neutral-200, #e4e1d8); }
.pf-attrs__cluster:first-child { padding-left: 0; border-left: 0; }
.pf-attrs__pair { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pf-attrs dt { font-size: 14px; font-weight: 700; letter-spacing: .06em; color: var(--brand-gold-ink, #7a5e17); white-space: nowrap; }
.pf-attrs dd { margin: 0; font-weight: 500; line-height: 18px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Medium: two clusters per row */
@container pf-attrs (max-width: 679px) {
  .pf-attrs__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 0; }
  .pf-attrs__cluster:nth-child(odd) { padding-left: 0; border-left: 0; }
}
/* Narrow: one column, each key and value side by side on one line */
@container pf-attrs (max-width: 399px) {
  .pf-attrs__grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .pf-attrs__cluster, .pf-attrs__cluster:nth-child(odd) { gap: 8px; padding: 10px 0; border-left: 0; border-top: 1px solid var(--neutral-200, #e4e1d8); }
  .pf-attrs__cluster:first-child { padding-top: 0; border-top: 0; }
  .pf-attrs__cluster:last-child { padding-bottom: 0; }
  .pf-attrs__pair { flex-direction: row; align-items: baseline; justify-content: space-between; gap: 12px; }
  .pf-attrs dt { flex: none; }
  .pf-attrs dd { min-width: 0; text-align: right; white-space: normal; overflow-wrap: anywhere; }
}

/* AttributeCluster: editable variant */
.pf-attrs--editable dd:has(.pf-attrs__value) { position: relative; overflow: visible; }
.pf-attrs__value { display: inline-flex; align-items: center; gap: 6px; max-width: calc(100% + 12px); min-height: 26px; margin: -4px -6px; padding: 3px 6px; border: 1px solid transparent; border-radius: var(--radius-sm, 6px); background: transparent; font: inherit; font-weight: 500; line-height: 18px; color: var(--neutral-900, #1a1a1a); text-align: left; cursor: pointer; }
.pf-attrs__value > span { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.pf-attrs__value > .pf-svg { flex: none; color: var(--neutral-600, #6b6963); opacity: 0; transition: opacity .15s; }
.pf-attrs__value:hover, .pf-attrs__value:focus-visible, .pf-attrs__value[aria-expanded="true"] { background: var(--neutral-100, #efeee9); }
.pf-attrs__value:hover > .pf-svg, .pf-attrs__value:focus-visible > .pf-svg, .pf-attrs__value[aria-expanded="true"] > .pf-svg { opacity: 1; }
.pf-attrs__value:focus-visible { outline: none; border-color: var(--brand-gold, #b69b56); box-shadow: var(--focus-ring, 0 0 0 3px rgba(182,155,86,.22)); }
.pf-attrs__value .pf-avatar { margin: 0 2px 0 0; }
.pf-attrs__value--empty > span { color: var(--neutral-600, #6b6963); }
.pf-attrs--editable .pf-menu { top: calc(100% + 6px); left: -6px; z-index: var(--z-dropdown, 60); width: 240px; box-shadow: var(--elevation-menu, 0 8px 24px rgba(26,26,26,.14)); }
.pf-menu__item[aria-selected="true"] { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-weight: 600; background: var(--brand-gold-tint, #fbf4e6); }
.pf-menu__item { display: flex; align-items: center; gap: 8px; }
.pf-menu__item .pf-avatar { margin: 0; }
.pf-menu__item[aria-selected="true"]::after { content: ""; flex: none; width: 12px; height: 7px; margin-left: auto; border-left: 2px solid var(--brand-gold-ink, #7a5e17); border-bottom: 2px solid var(--brand-gold-ink, #7a5e17); transform: translateY(-2px) rotate(-45deg); }
.pf-attrs__editor { display: flex; align-items: center; gap: 6px; margin: -5px -6px; }
.pf-attrs__editor .pf-input { height: 32px; min-width: 0; flex: 1 1 auto; padding: 0 8px; }
.pf-attrs__editor .pf-btn { width: 32px; height: 32px; flex: none; }
.pf-attrs__editor[hidden], .pf-attrs__value[hidden] { display: none; }
@container pf-attrs (max-width: 399px) {
  .pf-attrs--editable dd:has(.pf-attrs__value) { display: flex; justify-content: flex-end; }
  .pf-attrs__value > .pf-svg { order: -1; }
  .pf-attrs--editable .pf-menu { left: auto; right: -6px; }
}

/* PageHeader: titled variant */
.pf-header--titled { flex-direction: column; align-items: stretch; justify-content: center; gap: 14px; height: auto; min-height: 52px; padding-top: 14px; padding-bottom: 20px; }
.pf-header__titlerow { display: flex; align-items: center; gap: 14px; min-width: 0; }
.pf-header__icon { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: var(--radius-lg, 10px); background: var(--brand-gold-tint, #fbf4e6); color: var(--brand-burgundy, #4b0a1f); }
.pf-header__text { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pf-header__title { font-family: var(--font-display, Outfit, "IBM Plex Sans", sans-serif); margin: 0; font-size: 24px; line-height: 32px; font-weight: 800; color: var(--neutral-900, #1a1a1a); }
.pf-header__subtitle { margin: 0; color: var(--neutral-600, #6b6963); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

/* SegmentedControl: count */
.pf-seg__count { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: var(--radius-pill, 999px); background: var(--neutral-100, #efeee9); color: var(--neutral-800, #3a3935); font-size: 14px; font-weight: 700; line-height: 1; }
.pf-seg button[aria-pressed="true"] .pf-seg__count { background: var(--neutral-0, #fff); color: var(--brand-burgundy, #4b0a1f); }

/* ButtonGroup */
.pf-btngroup { display: inline-flex; align-items: stretch; border: 1px solid var(--neutral-300, #d8d4c8); border-radius: var(--radius-md, 8px); background: var(--neutral-0, #fff); overflow: hidden; }
.pf-btngroup > .pf-btn { height: 34px; padding: 0 14px; border: 0; border-radius: 0; background: transparent; color: var(--neutral-900, #1a1a1a); }
.pf-btngroup > .pf-btn + .pf-btn { border-left: 1px solid var(--neutral-200, #e4e1d8); }
.pf-btngroup > .pf-btn:hover:not(:disabled) { background: var(--brand-sand, #f6f3eb); }
.pf-btngroup > .pf-btn:focus-visible { position: relative; z-index: 1; }
.pf-btngroup > .pf-btn .pf-svg { color: var(--neutral-700, #5d5c58); }

/* CycleHeader */
.pf-cyclehead { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; min-height: 60px; padding: 10px 24px; background: var(--neutral-0, #fff); border-bottom: 1px solid var(--neutral-200, #e4e1d8); }
.pf-cyclehead > .pf-btn--ghost { margin-left: -10px; font-weight: 700; }
.pf-cyclehead__title { font-family: var(--font-display, Outfit, "IBM Plex Sans", sans-serif); margin: 0; font-size: 20px; line-height: 28px; font-weight: 700; color: var(--neutral-900, #1a1a1a); }
.pf-cyclehead__progress { color: var(--neutral-600, #6b6963); font-variant-numeric: tabular-nums; }
.pf-cyclehead__progress strong { color: var(--neutral-900, #1a1a1a); font-weight: 700; }

/* CycleToolbar */
.pf-cyclebar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; padding: 12px 24px; background: var(--neutral-0, #fff); border-bottom: 1px solid var(--neutral-200, #e4e1d8); }
.pf-cyclebar__end { margin-left: auto; }

/* AnswerOption */
.pf-options { display: flex; flex-direction: column; gap: 10px; max-width: 640px; }
.pf-option { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: center; gap: 6px 12px; padding: 14px 16px; border: 1px solid var(--neutral-300, #d8d4c8); border-radius: var(--radius-lg, 10px); background: var(--neutral-0, #fff); cursor: pointer; transition: border-color .15s, background .15s; }
.pf-option:hover { border-color: var(--brand-gold, #b69b56); }
.pf-option:focus-visible { outline: none; border-color: var(--brand-gold, #b69b56); box-shadow: var(--focus-ring, 0 0 0 3px rgba(182,155,86,.22)); }
.pf-option__letter.pf-badge { width: 28px; height: 28px; padding: 0; background: var(--neutral-100, #efeee9); color: var(--neutral-800, #3a3935); }
.pf-option__title { font-size: 16px; line-height: 24px; font-weight: 700; color: var(--neutral-900, #1a1a1a); }
.pf-option__tag { font-size: 14px; font-weight: 700; letter-spacing: .06em; color: var(--brand-gold-ink, #7a5e17); }
.pf-option__body { grid-column: 2 / -1; display: flex; flex-direction: column; gap: 6px; color: var(--neutral-800, #3a3935); }
.pf-option__body p { margin: 0; }
.pf-option__body ul { margin: 0; padding-left: 20px; list-style: circle; }
.pf-option__body li + li { margin-top: 2px; }
.pf-option__why { margin-top: 6px; padding-top: 10px; border-top: 1px solid color-mix(in srgb, var(--brand-gold, #b69b56) 35%, transparent); color: var(--brand-gold-ink, #7a5e17); }
.pf-option--suggested { padding: 13px 15px; border: 2px solid var(--brand-gold, #b69b56); background: var(--brand-gold-tint, #fbf4e6); }
.pf-option--suggested .pf-option__letter.pf-badge { background: var(--brand-gold, #b69b56); color: var(--neutral-0, #fff); }
.pf-option[aria-checked="true"] { padding: 13px 15px; border: 2px solid var(--brand-burgundy, #4b0a1f); }
.pf-option[aria-checked="true"] .pf-option__letter.pf-badge { background: var(--brand-burgundy, #4b0a1f); color: var(--neutral-0, #fff); }

/* QuestionCard */
.pf-qcard { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.pf-qcard__head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; color: var(--neutral-600, #6b6963); font-size: 16px; line-height: 24px; }
.pf-qcard__head .pf-avatar { margin-right: 4px; }
.pf-qcard__head strong { color: var(--neutral-900, #1a1a1a); font-weight: 700; }
.pf-qcard__status { font-weight: 700; color: var(--feedback-danger, #b30000); }
.pf-qcard__status--answered { color: var(--feedback-success, #2f6b18); }
.pf-qcard__status--skipped { color: var(--neutral-600, #6b6963); }
.pf-qcard__box { display: flex; flex-direction: column; gap: 18px; padding: 22px 24px 24px; border: 1px solid var(--neutral-300, #d8d4c8); border-radius: var(--radius-xl, 12px); background: var(--neutral-0, #fff); }
.pf-qcard__q { font-family: var(--font-display, Outfit, "IBM Plex Sans", sans-serif); margin: 0; font-size: 20px; line-height: 28px; font-weight: 600; color: var(--neutral-900, #1a1a1a); }
.pf-qcard__actions { display: flex; flex-wrap: wrap; gap: 8px; }

/* CycleContext */
.pf-cyclectx { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.pf-cyclectx .pf-card { width: 100%; }
.pf-cyclectx__hint { margin: 0; color: var(--neutral-600, #6b6963); }
.pf-cyclectx__next { margin: 0; color: var(--neutral-700, #5d5c58); font-weight: 600; }

/* QuestionCycle */
.pf-cycle { container: pf-cycle / inline-size; background: var(--neutral-50, #f7f6f4); }
.pf-cycle__main { display: grid; grid-template-columns: minmax(240px, 300px) minmax(0, 1fr); align-items: start; gap: 32px; padding: 24px; }
@container pf-cycle (max-width: 759px) {
  .pf-cycle__main { grid-template-columns: minmax(0, 1fr); gap: 20px; padding: 16px; }
  .pf-cyclebar__end { margin-left: 0; }
}

/* SidePanel */
.pf-side { display: flex; flex-direction: column; width: 480px; max-width: 100%; height: 100%; min-height: 0; background: var(--neutral-0, #fff); border-left: 1px solid var(--neutral-300, #d8d4c8); box-shadow: var(--elevation-5, -12px 0 32px rgba(26,26,26,.16)); }
.pf-side--wide { width: 75%; }
.pf-side__head { flex: none; display: flex; align-items: center; gap: 10px; padding: 14px 16px 14px 24px; border-bottom: 1px solid var(--neutral-200, #e4e1d8); }
.pf-side__head > .pf-btn { margin-left: auto; }
.pf-side__body { flex: 1 1 auto; min-height: 0; overflow: auto; padding-bottom: 24px; }
.pf-side__title { font-family: var(--font-display, Outfit, "IBM Plex Sans", sans-serif); margin: 0; padding: 20px 24px 14px; font-size: 20px; line-height: 28px; font-weight: 700; color: var(--neutral-900, #1a1a1a); }
.pf-side__attrs { padding: 0 24px 20px; border-bottom: 1px solid var(--neutral-200, #e4e1d8); }
.pf-side__section { padding: 18px 24px 0; }
.pf-side__section h3 { margin: 0 0 8px; font-size: 14px; line-height: 20px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--neutral-600, #6b6963); }
.pf-side__section p { margin: 0; line-height: 22px; color: var(--neutral-900, #1a1a1a); }
.pf-side > .pf-dfoot { flex: none; }
.pf-side-frame { position: relative; display: flex; justify-content: flex-end; height: 760px; overflow: hidden; border: 1px solid var(--neutral-300, #d8d4c8); border-radius: var(--radius-md, 8px); background: repeating-linear-gradient(0deg, var(--neutral-50, #f7f6f4) 0 34px, var(--neutral-100, #efeee9) 34px 35px); }
@media (max-width: 599px) { .pf-side, .pf-side--wide { width: 100%; border-left: 0; } }

/* Global: link buttons */
a.pf-btn { text-decoration: none; }

/* QuestionCard: answering */
.pf-qcard__box--answering { padding: 21px 23px 23px; border: 2px solid var(--brand-gradient-from, #fa0000); }
.pf-qcard__box--answering .pf-qcard__q { padding-bottom: 16px; border-bottom: 1px solid var(--neutral-200, #e4e1d8); }
.pf-qcard__answer { display: flex; flex-direction: column; gap: 8px; }
.pf-qcard__answer .pf-field__label { font-weight: 700; }
.pf-qcard__hint { margin: 0; color: var(--neutral-600, #6b6963); }

/* Toast: title and body */
.pf-toast__text { display: flex; flex-direction: column; gap: 2px; }
.pf-toast__title { font-weight: 700; color: var(--neutral-900, #1a1a1a); }
.pf-toast__body { color: var(--neutral-800, #3a3935); }
.pf-toast.pf-toast--wide { width: min(640px, calc(100vw - 32px)); }

/* EmptyState */
.pf-empty { --acc: var(--neutral-600, #6b6963); display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 36px 24px 40px; border: 1px solid color-mix(in srgb, var(--acc) 30%, var(--neutral-0, #fff)); border-radius: var(--radius-xl, 12px); background: color-mix(in srgb, var(--acc) 5%, var(--neutral-0, #fff)); text-align: center; }
.pf-empty__icon { display: inline-flex; align-items: center; justify-content: center; width: 64px; height: 64px; margin-bottom: 8px; border: 1px solid color-mix(in srgb, var(--acc) 35%, var(--neutral-0, #fff)); border-radius: var(--radius-pill, 999px); background: var(--neutral-0, #fff); color: var(--acc); }
.pf-empty__title { font-family: var(--font-display, Outfit, "IBM Plex Sans", sans-serif); margin: 0; font-size: 18px; line-height: 26px; font-weight: 700; color: color-mix(in srgb, var(--acc) 75%, var(--mix-ink, #000)); }
.pf-empty__text { margin: 0; max-width: 56ch; color: color-mix(in srgb, var(--acc) 85%, var(--mix-ink, #000)); }
.pf-empty--loading { --acc: var(--agent-nina, #9b3fd6); }
.pf-empty--done { --acc: var(--feedback-success, #2f6b18); }
.pf-empty--loading .pf-empty__icon .pf-svg { animation: pf-wobble 1.6s ease-in-out infinite; }
@keyframes pf-wobble { 0%, 100% { transform: rotate(-18deg); } 50% { transform: rotate(18deg); } }
@media (prefers-reduced-motion: reduce) { .pf-empty--loading .pf-empty__icon .pf-svg { animation: none; transform: rotate(-18deg); } }

/* Logo */
.pf-logo { --logo-size: 28px; display: inline-flex; align-items: center; gap: calc(var(--logo-size) * .3); font-size: var(--logo-size); line-height: 1; color: var(--brand-burgundy, #4b0a1f); text-decoration: none; }
.pf-logo__mark { flex: none; width: calc(var(--logo-size) * 1.25); height: calc(var(--logo-size) * 1.25); }
.pf-logo__a { fill: none; stroke: currentColor; stroke-width: 14; stroke-linecap: round; stroke-linejoin: round; }
.pf-logo__ball { fill: var(--brand-gold, #b69b56); }
.pf-logo__word { font-family: var(--font-display, Outfit, "IBM Plex Sans", sans-serif); font-weight: 700; letter-spacing: -0.02em; text-transform: lowercase; transform: translateY(-.04em); }
.pf-logo--oncolor { color: var(--neutral-0, #fff); }
.pf-logo--stacked { flex-direction: column; gap: calc(var(--logo-size) * .15); }
.pf-logo--stacked .pf-logo__mark { width: calc(var(--logo-size) * 2.4); height: calc(var(--logo-size) * 2.4); }
.pf-logo--mark .pf-logo__word { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.pf-rail__tile .pf-logo__mark { width: 24px; height: 24px; }
.pf-rail__tile { color: var(--brand-burgundy, #4b0a1f); }
.pf-rail__appname { font-family: var(--font-display, Outfit, "IBM Plex Sans", sans-serif); font-size: 22px; letter-spacing: -0.02em; }
.pf-crumbs__home { display: inline-flex; align-items: center; gap: 6px; }
.pf-crumbs__home .pf-logo__mark { width: 18px; height: 18px; color: var(--brand-burgundy, #4b0a1f); }
.pf-logo-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.pf-logo-tile { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; min-height: 150px; padding: 18px; border: 1px solid var(--neutral-200, #e4e1d8); border-radius: var(--radius-lg, 10px); background: var(--neutral-0, #fff); }
.pf-logo-tile--rail { border: 0; background: linear-gradient(180deg, var(--brand-red, #e3122b), var(--brand-rail-end, #e8457e)); }
.pf-logo-tile--ink { border: 0; background: var(--neutral-900, #1a1a1a); }
.pf-logo-tile small { font-size: 14px; color: var(--neutral-600, #6b6963); }
.pf-logo-tile--rail small, .pf-logo-tile--ink small { color: var(--on-rail-muted, rgba(255,255,255,.85)); }
.pf-logo-assets { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.pf-logo-asset { display: flex; flex-direction: column; gap: 8px; padding: 12px; border: 1px solid var(--neutral-200, #e4e1d8); border-radius: var(--radius-md, 8px); background: var(--neutral-0, #fff); }
.pf-logo-asset__img { display: flex; align-items: center; justify-content: center; height: 88px; border-radius: var(--radius-sm, 6px); background: var(--neutral-50, #f7f6f4); }
.pf-logo-asset__img--dark { background: #1f5f99; }
.pf-logo-asset__img img { max-width: 90%; max-height: 64px; }
.pf-logo-asset code { font-family: var(--font-mono, "JetBrains Mono", ui-monospace, monospace); font-size: 14px; color: var(--neutral-700, #5d5c58); overflow-wrap: anywhere; }

/* RecordPanel */
.pf-recpanel { min-width: 0; padding: 14px 20px 16px; background: var(--neutral-0, #fff); border: 1px solid var(--neutral-300, #d8d4c8); border-radius: var(--radius-xl, 12px); }
.pf-recpanel__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 0 12px; }
.pf-recpanel__title { margin: 0; font-size: 14px; line-height: 20px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--neutral-600, #6b6963); }
.pf-recpanel--flush { padding: 0; border: 0; border-radius: 0; background: transparent; }
.pf-demo-label { display: block; margin: 0 0 6px; font-size: 14px; font-weight: 600; color: var(--neutral-600, #6b6963); }
.pf-demo-slot { display: flex; align-items: center; justify-content: center; min-height: 120px; padding: 12px; border: 1px dashed var(--neutral-300, #d8d4c8); border-radius: var(--radius-xl, 12px); color: var(--neutral-600, #6b6963); text-align: center; }

/* RequirementCard */
.pf-card { position: relative; display: flex; flex-direction: column; width: 264px; border: 1px solid var(--neutral-300, #d8d4c8); border-radius: var(--radius-md, 8px); background: var(--neutral-0, #fff); box-shadow: var(--elevation-1, 0 1px 2px rgba(164,140,78,.10)); overflow: hidden; }
.pf-card__head { display: flex; align-items: center; gap: 8px; padding: 7px 12px; background: var(--card-header, #efe8da); border-bottom: 1px solid var(--card-header-border, #e0d8c6); text-decoration: none; color: inherit; }
.pf-card__head .pf-pill { margin-left: auto; height: 22px; }
.pf-card__body { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px 12px; }
.pf-card__title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-weight: 600; color: var(--neutral-900, #1a1a1a); text-decoration: none; }
.pf-card__meta { display: grid; grid-template-columns: minmax(72px, max-content) minmax(0, 1fr); gap: 6px 12px; align-items: center; padding-top: 8px; border-top: 1px solid var(--neutral-100, #efeee9); }
.pf-card__meta dt { color: var(--neutral-600, #6b6963); } .pf-card__meta dd { margin: 0; font-weight: 500; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.pf-card__people { display: flex; align-items: center; gap: 8px; padding-top: 10px; border-top: 1px solid var(--neutral-100, #efeee9); }
.pf-card__people > :last-child { margin-left: auto; }
/* Lone (HELP-123): a record not read yet, drawn from its ID and title; not a link, nothing takes focus. */
.pf-card--lone { cursor: default; }
.pf-card--lone .pf-card__head { cursor: default; }
.pf-card__foot { display: flex; align-items: center; gap: 2px; padding: 6px 8px; border-top: 1px solid var(--neutral-100, #efeee9); background: var(--card-footer, #fafaf8); }
.pf-count { display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 7px; border-radius: var(--radius-pill, 999px); color: var(--neutral-700, #5d5c58); font-weight: 600; }
.pf-count--zero { opacity: .5; }
.pf-count--new { background: var(--feedback-new-bg, #ffe3e3); color: var(--feedback-new, #9e1a1a); font-weight: 700; }
.pf-card__open { position: absolute; inset: 0; z-index: 4; display: none; align-items: center; justify-content: center; border-radius: var(--radius-md, 8px); background: color-mix(in srgb, var(--neutral-0, #fff) 55%, transparent); box-shadow: inset 0 0 0 2px var(--brand-gold, #b69b56); text-decoration: none; }
.pf-card:hover .pf-card__open, .pf-card__open:focus-visible { display: flex; }
.pf-card__open span { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 14px; border-radius: var(--radius-pill, 999px); background: var(--brand-burgundy, #4b0a1f); color: var(--neutral-0, #fff); font-weight: 600; box-shadow: var(--open-detail, 0 4px 12px rgba(75,10,31,.25)); }
.pf-card__people, .pf-card__foot { position: relative; z-index: 5; }

/* ---------- Atoms (more) ---------- */
/* StatusIcon: colour comes from the parent (currentColor) */
.pf-sicon { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; }

/* DayDivider */
.pf-day { display: flex; align-items: center; gap: 12px; width: 100%; color: var(--neutral-600, #6b6963); }
.pf-day--today .pf-date { border-color: var(--brand-gold, #b69b56); background: var(--brand-gold-tint, #fbf4e6); }
.pf-day--today .pf-date__m { color: var(--brand-gold-ink, #7a5e17); }
.pf-day::before, .pf-day::after { content: ""; flex: 1 1 0; height: 1px; background: var(--neutral-200, #e4e1d8); }

/* DateMarker */
.pf-date { display: inline-flex; flex-direction: column; align-items: center; min-width: 48px; padding: 8px 8px 9px; border: 1px solid var(--neutral-300, #d8d4c8); border-radius: var(--radius-md, 8px); background: var(--neutral-0, #fff); line-height: 1; }
.pf-date__m { font-size: 14px; font-weight: 700; letter-spacing: .1em; color: var(--neutral-600, #6b6963); }
.pf-date__rule { width: 22px; height: 1px; margin: 6px 0; background: var(--neutral-300, #d8d4c8); }
.pf-date__d { font-size: 15px; font-weight: 800; color: var(--neutral-900, #1a1a1a); }

/* ---------- Molecules (more) ---------- */
/* WorkingStatus — set --acc */
.pf-work { --acc: var(--state-working, #2e7dd1); display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 9px 0 7px; border: 1px solid var(--acc); border-radius: var(--radius-pill, 999px); background: color-mix(in srgb, var(--acc) 10%, var(--neutral-0, #fff)); color: color-mix(in srgb, var(--acc) 65%, var(--mix-ink, #000)); font-size: 14px; font-weight: 700; line-height: 1; white-space: nowrap; }

/* Cell */
.pf-cell { display: flex; align-items: center; gap: 6px; min-width: 0; min-height: 40px; line-height: 18px; }
.pf-cell__id { font-family: var(--font-mono, "JetBrains Mono", ui-monospace, monospace); font-weight: 700; color: var(--neutral-700, #5d5c58); white-space: nowrap; }
.pf-cell__title { display: flex; flex-direction: column; min-width: 0; }
.pf-cell__title a { font-weight: 600; color: var(--neutral-900, #1a1a1a); text-decoration: none; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.pf-cell__sub, .pf-cell__date { color: var(--neutral-600, #6b6963); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.pf-cell__type { padding: 1px 8px; border: 1px solid var(--neutral-300, #d8d4c8); border-radius: var(--radius-pill, 999px); background: var(--neutral-50, #f7f6f4); font-weight: 600; color: var(--neutral-800, #3a3935); white-space: nowrap; }
.pf-cell__name { font-weight: 500; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.pf-idchip { padding: 1px 7px; border: 1px solid var(--neutral-300, #d8d4c8); border-radius: var(--radius-xs, 4px); background: var(--neutral-50, #f7f6f4); font-family: var(--font-mono, "JetBrains Mono", ui-monospace, monospace); font-weight: 700; color: var(--neutral-800, #3a3935); white-space: nowrap; }

/* Menus (MenuButton, ActionsMenu) */
.pf-menuwrap { position: relative; display: inline-flex; }
.pf-menu { position: absolute; top: 42px; left: 0; z-index: 30; display: flex; flex-direction: column; gap: 2px; width: 230px; padding: 6px; border: 1px solid var(--neutral-300, #d8d4c8); border-radius: var(--radius-md, 8px); background: var(--neutral-0, #fff); box-shadow: var(--elevation-menu, 0 6px 20px rgba(0,0,0,.20)); }
.pf-menu--right { left: auto; right: 0; }
.pf-menu[hidden] { display: none; }
.pf-menu__head { padding: 6px 10px 4px; font-size: 14px; font-weight: 600; letter-spacing: .06em; color: var(--neutral-600, #6b6963); }
.pf-menu__item { padding: 8px 10px; border: 0; border-radius: var(--radius-sm, 6px); background: transparent; font: inherit; font-weight: 500; color: var(--neutral-900, #1a1a1a); text-align: left; cursor: pointer; }
.pf-menu__item:hover { background: var(--brand-sand, #f6f3eb); }
.pf-menu__item--danger { font-weight: 600; color: var(--feedback-danger, #b30000); }
.pf-menu__sep { height: 1px; margin: 4px 0; background: var(--neutral-100, #efeee9); }
.pf-opt { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border: 1px solid transparent; border-radius: var(--radius-md, 8px); background: transparent; font: inherit; font-weight: 500; color: var(--neutral-900, #1a1a1a); text-align: left; cursor: pointer; }
.pf-opt[aria-checked="true"], .pf-opt[aria-selected="true"] { border-color: var(--brand-gold, #b69b56); background: var(--brand-gold-tint, #fbf4e6); font-weight: 600; }
.pf-opt__box { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border: 1.5px solid var(--neutral-400, #c9c5ba); border-radius: var(--radius-xs, 4px); background: var(--neutral-0, #fff); color: var(--neutral-0, #fff); }
.pf-opt__box svg { visibility: hidden; }
.pf-opt[aria-checked="true"] .pf-opt__box, .pf-opt[aria-selected="true"] .pf-opt__box { border-color: var(--brand-gold, #b69b56); background: var(--brand-gold, #b69b56); }
.pf-opt[aria-checked="true"] .pf-opt__box svg, .pf-opt[aria-selected="true"] .pf-opt__box svg { visibility: visible; }
.pf-dotflag { position: absolute; top: -4px; right: -4px; width: 10px; height: 10px; border: 2px solid var(--neutral-0, #fff); border-radius: 999px; background: var(--brand-burgundy, #4b0a1f); }
.pf-btn--icon34 { width: 34px; height: 34px; }
/* Button: message variants and icon-only on any variant */
.pf-btn--danger { padding: 0 14px; border: 0; background: var(--feedback-danger, #b30000); color: var(--neutral-0, #fff); }
.pf-btn--warning { padding: 0 14px; border: 0; background: var(--feedback-warning, #8a4b00); color: var(--neutral-0, #fff); }
.pf-btn--success { padding: 0 14px; border: 0; background: var(--feedback-success, #2f6b18); color: var(--neutral-0, #fff); }
.pf-btn--info { padding: 0 14px; border: 0; background: var(--feedback-info, #0b4f8a); color: var(--neutral-0, #fff); }
.pf-btn--neutral { padding: 0 14px; border: 0; background: var(--neutral-100, #efeee9); color: var(--neutral-900, #1a1a1a); }
.pf-btn--danger:hover, .pf-btn--warning:hover, .pf-btn--success:hover, .pf-btn--info:hover { background-image: linear-gradient(color-mix(in srgb, var(--mix-ink, #000) 14%, transparent), color-mix(in srgb, var(--mix-ink, #000) 14%, transparent)); }
.pf-btn--neutral:hover { background: var(--neutral-200, #e4e1d8); }
.pf-btn--secondary:hover, .pf-btn--icon:hover { border-color: var(--brand-gold, #b69b56); }
.pf-btn--primary:hover { filter: brightness(.94); }
.pf-btn--ghost:hover { background: var(--neutral-100, #efeee9); }
.pf-btn--square { width: 36px; padding: 0; }
.pf-btn:disabled, .pf-btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; filter: none; }
.pf-btngrid { display: grid; grid-template-columns: 120px repeat(3, max-content); gap: 12px 20px; align-items: center; }
.pf-btngrid__h { font-size: 14px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--neutral-600, #6b6963); }


/* MultiSelect */
.pf-ms { position: relative; display: flex; flex-direction: column; gap: 6px; width: 100%; line-height: 18px; }
.pf-ms__label, .pf-legend { font-size: 14px; font-weight: 700; letter-spacing: .08em; color: var(--neutral-600, #6b6963); }
.pf-ms__field { display: flex; align-items: center; gap: 8px; min-height: 36px; padding: 5px 8px 5px 6px; border: 1px solid var(--neutral-300, #d8d4c8); border-radius: var(--radius-md, 8px); background: var(--neutral-0, #fff); cursor: pointer; }
.pf-ms__field[aria-expanded="true"] { border-color: var(--brand-gold, #b69b56); box-shadow: var(--focus-ring, 0 0 0 3px rgba(182,155,86,.22)); }
.pf-ms__chips { display: flex; flex: 1 1 auto; flex-wrap: wrap; align-items: center; gap: 4px; min-width: 0; }
.pf-ms__chip { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 6px 0 9px; border: 1px solid var(--brand-gold, #b69b56); border-radius: var(--radius-pill, 999px); background: var(--brand-gold-tint, #fbf4e6); color: var(--category-prepare-fg, #766538); font-weight: 600; }
.pf-ms__chip button { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; margin-right: -3px; padding: 0; border: 0; border-radius: 999px; background: transparent; color: inherit; cursor: pointer; }
.pf-ms__more { display: inline-flex; align-items: center; height: 24px; padding: 0 8px; border-radius: var(--radius-pill, 999px); background: var(--neutral-100, #efeee9); color: var(--neutral-800, #3a3935); font-weight: 700; }
.pf-ms__list { position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 60; display: flex; flex-direction: column; gap: 2px; padding: 6px; border: 1px solid var(--neutral-300, #d8d4c8); border-radius: var(--radius-lg, 10px); background: var(--neutral-0, #fff); box-shadow: var(--elevation-3, 0 10px 30px rgba(0,0,0,.14)); }
.pf-ms__search { height: 32px; margin: 0 0 4px; padding: 0 10px; border: 1px solid var(--neutral-300, #d8d4c8); border-radius: var(--radius-md, 8px); background: var(--neutral-50, #f7f6f4); font: inherit; }
.pf-ms__foot { display: flex; align-items: center; justify-content: space-between; margin-top: 4px; padding: 8px 4px 2px; border-top: 1px solid var(--neutral-100, #efeee9); color: var(--neutral-600, #6b6963); }
.pf-ms__foot button { padding: 2px 6px; border: 0; background: transparent; font: inherit; font-weight: 700; color: var(--multiselect-clear, #8e1a2f); cursor: pointer; }

/* StatusButton — set --acc */
.pf-statusbtn { --acc: var(--category-draft, #8c8a83); display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 10px 0 12px; border: 1px solid var(--acc); border-radius: var(--radius-md, 8px); background: color-mix(in srgb, var(--acc) 10%, var(--neutral-0, #fff)); color: color-mix(in srgb, var(--acc) 65%, var(--mix-ink, #000)); font: inherit; font-weight: 600; white-space: nowrap; cursor: pointer; }
.pf-statusbtn > .pf-svg:first-child { color: var(--acc); }
.pf-statusbtn__cat { font-weight: 700; letter-spacing: .06em; opacity: .75; }
.pf-statusbtn__div { align-self: stretch; width: 1px; margin: 6px 0 6px 2px; background: var(--acc); opacity: .5; }

/* SuggestedAnswer */
.pf-suggest { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; border-radius: var(--radius-md, 8px); background: var(--brand-sand, #f6f3eb); }
.pf-suggest__k { font-weight: 700; letter-spacing: .06em; color: var(--brand-gold-outline-ink, #6e5a26); }
.pf-suggest__t { color: var(--neutral-800, #3a3935); }

/* AnswerBubble */
.pf-answer { display: flex; justify-content: flex-end; gap: 10px; width: 100%; }
.pf-answer__col { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; max-width: 560px; }
.pf-answer__meta { color: var(--neutral-600, #6b6963); } .pf-answer__meta strong { color: var(--neutral-900, #1a1a1a); }
.pf-answer__text { margin: 0; padding: 10px 14px; border-radius: 14px 4px 14px 14px; background: var(--brand-burgundy, #4b0a1f); color: var(--neutral-0, #fff); line-height: 21px; }

/* ChatThreadItem */
.pf-thread { display: flex; align-items: center; gap: 16px; width: 100%; padding: 16px 18px; border: 0; border-bottom: 1px solid var(--neutral-100, #efeee9); background: transparent; font: inherit; text-align: left; cursor: pointer; transition: background .12s; }
.pf-thread:hover { border-radius: var(--radius-xl, 12px); background: var(--thread-hover, #faf8f3); }
.pf-thread[aria-current="page"] { border-radius: var(--radius-xl, 12px); background: var(--brand-sand, #f6f3eb); }
.pf-thread__main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.pf-thread__top, .pf-thread__bottom { display: flex; align-items: center; gap: 8px; }
.pf-thread__name { flex: 1 1 auto; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.pf-thread__name strong { font-size: 16px; font-weight: 600; } .pf-thread__role, .pf-thread__time { color: var(--neutral-500, #8c8a83); }
.pf-thread__role { margin-left: 6px; } .pf-thread__time { flex: none; }
.pf-thread__preview { flex: 1 1 auto; min-width: 0; color: var(--neutral-600, #6b6963); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.pf-count-red { flex: none; display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: var(--radius-pill, 999px); background: var(--brand-red, #e3122b); color: var(--neutral-0, #fff); font-size: 14px; font-weight: 700; }
.pf-avatar--xl { width: 46px; height: 46px; font-size: 15px; }
.pf-avatar--xl.pf-avatar--agent { border-radius: 13px; margin: 0 6px; }
.pf-avatar--xl.pf-avatar--agent::before { top: -10px; height: 9px; } .pf-avatar--xl.pf-avatar--agent::after { top: -15px; width: 10px; height: 10px; margin-left: -5px; }
.pf-avatar--xl .pf-avatar__ear { width: 6px; } .pf-avatar--xl .pf-avatar__ear--l { left: -8px; } .pf-avatar--xl .pf-avatar__ear--r { right: -8px; }
.pf-avatar--sm { width: 20px; height: 20px; }
.pf-avatar--oncolor { --ring: var(--neutral-0, #fff); border: 0; background: var(--neutral-0, #fff); color: var(--feedback-alert, #c8001e); font-weight: 800; }

/* ChatSwitcher */
.pf-chats__head { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 40px; padding: 6px 10px; border: 0; border-radius: var(--radius-md, 8px); background: transparent; font: inherit; text-align: left; cursor: pointer; }
.pf-chats__head .pf-svg { color: var(--neutral-600, #6b6963); transition: transform .15s; }
.pf-chats__head[aria-expanded="false"] .pf-svg { transform: rotate(-90deg); }
.pf-chats__head .pf-count-red { margin-left: auto; }
.pf-chats__strip { display: flex; gap: 14px; overflow-x: auto; padding: 12px 10px 10px; }
.pf-chatpill { --ring: var(--category-prepare, #b69b56); flex: none; display: inline-flex; align-items: center; gap: 10px; height: 42px; padding: 0 16px 0 12px; border: 1px solid var(--neutral-300, #d8d4c8); border-radius: var(--radius-pill, 999px); background: var(--neutral-0, #fff); font: inherit; font-weight: 600; cursor: pointer; }
.pf-chatpill[aria-current="page"] { border: 2px solid var(--ring); background: color-mix(in srgb, var(--ring) 10%, var(--neutral-0, #fff)); font-weight: 700; }

/* ---------- Organisms (more) ---------- */
/* Record card variants (story, issue) */
.pf-card--story .pf-card__head { background: var(--record-story-header, #e8eefb); border-bottom-color: var(--record-story-header-border, #d3ddf4); color: var(--record-story-ink, #1b3a9e); }
.pf-card--issue .pf-card__head { background: var(--record-issue-header, #fbe6e6); border-bottom-color: var(--record-issue-header-border, #f1cccc); color: var(--record-issue-ink, #9e1a1a); }
.pf-card--story .pf-card__head .pf-id { color: var(--record-story-ink, #1b3a9e); }
.pf-card--issue .pf-card__head .pf-id { color: var(--record-issue-ink, #9e1a1a); }
.pf-card__date { margin-left: auto; color: var(--neutral-600, #6b6963); }
.pf-type--bug { font-weight: 600; color: var(--record-issue-ink, #9e1a1a); }
.pf-type--other { font-weight: 600; color: var(--record-story-ink, #1b3a9e); }
.pf-pill--todo { border-color: var(--category-draft, #8c8a83); background: var(--category-draft-bg, #f4f3f3); color: var(--category-draft-fg, #5b5a55); }
.pf-pill--inprogress { border-color: var(--state-working, #2e7dd1); background: var(--feedback-info-bg, #e3f1ff); color: var(--feedback-info, #0b4f8a); }
.pf-pill--todo .pf-svg { color: var(--category-draft, #8c8a83); } .pf-pill--inprogress .pf-svg { color: var(--state-working, #2e7dd1); }

/* Rows */
.pf-rowgrid { display: grid; gap: 12px; align-items: center; min-height: 48px; padding: 0 16px; border-bottom: 1px solid var(--neutral-100, #efeee9); background: var(--neutral-0, #fff); }
.pf-rowgrid--req { grid-template-columns: 90px minmax(220px, 1fr) 180px 120px 150px 130px 64px 100px; }
.pf-rowgrid--story { grid-template-columns: 110px minmax(220px, 1fr) 150px 120px 70px 70px 100px; }
.pf-rowgrid--issue { grid-template-columns: 80px minmax(220px, 1fr) 110px 110px 110px 200px 170px 100px; }

/* ViewRibbon */
.pf-ribbon { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 12px 24px; background: var(--neutral-50, #f7f6f4); }
.pf-ribbon__tools { display: inline-flex; align-items: center; gap: 4px; flex: none; }
.pf-ribbon__search { flex: 1 1 240px; min-width: 200px; }

/* RecordHeader */
.pf-record { display: flex; flex-direction: column; gap: 14px; padding: 16px 24px 14px; background: var(--neutral-0, #fff); border-bottom: 1px solid var(--neutral-300, #d8d4c8); }
.pf-record__top { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.pf-record__title { font-family: var(--font-display, Outfit, "IBM Plex Sans", sans-serif); flex: 1 1 520px; min-width: 0; margin: 0; font-size: 18px; line-height: 26px; font-weight: 700; }
.pf-record__actions { display: flex; align-items: center; gap: 8px; }
.pf-record__body { display: flex; align-items: flex-start; gap: 12px; }
.pf-record__toggle { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; margin-top: 1px; border: 1px solid var(--neutral-300, #d8d4c8); border-radius: var(--radius-sm, 6px); background: var(--neutral-0, #fff); color: var(--neutral-800, #3a3935); cursor: pointer; }
.pf-record__toggle .pf-svg { transition: transform .15s; }
.pf-record__toggle[aria-expanded="true"] .pf-svg { transform: rotate(90deg); }
.pf-record__summary { margin: 0; line-height: 26px; color: var(--neutral-700, #5d5c58); }

/* FilterPanel */
.pf-filters { display: flex; flex-direction: column; width: 380px; background: var(--neutral-0, #fff); border-left: 1px solid var(--neutral-300, #d8d4c8); box-shadow: var(--elevation-5, 0 15px 50px rgba(0,0,0,.18)); }
.pf-filters__head { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--neutral-100, #efeee9); }
.pf-filters__head h2 { margin: 0; font-size: 16px; font-weight: 600; color: var(--brand-burgundy, #4b0a1f); }
.pf-filters__body { display: flex; flex-direction: column; gap: 22px; padding: 16px 20px; }
.pf-filters__body fieldset { margin: 0; padding: 0; border: 0; display: flex; flex-direction: column; gap: 6px; }
.pf-filters__body legend { padding: 0 0 10px; }
.pf-filters__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.pf-filters__foot { display: flex; justify-content: space-between; gap: 12px; padding: 14px 20px; border-top: 1px solid var(--neutral-100, #efeee9); }

/* QuestionBubble */
.pf-question { display: flex; flex-direction: column; gap: 8px; max-width: 760px; }
.pf-question__head { display: flex; align-items: center; gap: 12px; min-width: 0; padding-top: 8px; }
.pf-question__head time { margin-left: auto; flex: none; color: var(--neutral-600, #6b6963); }
.pf-question__box { display: flex; flex-direction: column; gap: 12px; padding: 14px 16px; border: 1px solid var(--neutral-300, #d8d4c8); border-radius: var(--radius-xl, 12px); background: var(--neutral-0, #fff); }
.pf-question__text { margin: 0; font-size: 15px; line-height: 22px; font-weight: 600; }
.pf-question__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; padding-top: 4px; border-top: 1px solid var(--neutral-100, #efeee9); }
.pf-named--state { padding: 3px 10px 3px 8px; border-color: color-mix(in srgb, var(--state-waiting, #d97a00) 45%, var(--neutral-0, #fff)); background: color-mix(in srgb, var(--state-waiting, #d97a00) 8%, var(--neutral-0, #fff)); }
.pf-named__sep { width: 1px; height: 12px; background: var(--neutral-300, #d8d4c8); }

/* ArchivedQuestion */
.pf-archived { display: flex; flex-direction: column; gap: 14px; padding: 18px 22px 20px; border: 1px solid var(--neutral-200, #e4e1d8); border-radius: var(--radius-lg, 10px); background: repeating-linear-gradient(135deg, var(--neutral-50, #f7f6f4) 0 10px, var(--neutral-100, #efeee9) 10px 11px); }
.pf-archived__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding-bottom: 14px; margin-bottom: 4px; border-bottom: 1px solid var(--neutral-200, #e4e1d8); color: var(--neutral-700, #5d5c58); }
.pf-archived__meta a { color: var(--neutral-800, #3a3935); text-decoration: none; font-weight: 500; }
.pf-archived__msg { display: flex; gap: 12px; padding-left: 4px; }
.pf-archived__msg > div { display: flex; flex-direction: column; gap: 4px; }
.pf-archived__msg--answer { margin-left: 32px; }
.pf-archived__msg p { margin: 0; line-height: 22px; }
.pf-archived__agent { color: var(--brand-gold-ink, #7a5e17); } .pf-archived__human { color: var(--feedback-alert, #c8001e); }
.pf-muted { color: var(--neutral-600, #6b6963); }

/* Rail: ArmandoNav, NavFooter, MobileTabBar */
.pf-rail { display: flex; flex-direction: column; width: 240px; min-height: 860px; background: linear-gradient(180deg, var(--brand-red, #e3122b) 0%, var(--brand-rail-end, #e8457e) 100%); color: var(--neutral-0, #fff); }
.pf-rail--collapsed { width: 72px; }
.pf-rail__app { display: flex; align-items: center; gap: 10px; height: 40px; margin: 18px 0 16px; padding: 0 14px; border: 0; background: transparent; font: inherit; color: var(--neutral-0, #fff); cursor: pointer; }
.pf-rail__tile { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 7px; background: var(--neutral-0, #fff); color: var(--brand-red, #e3122b); font-size: 16px; font-weight: 800; }
.pf-rail__appname { flex: 1 1 auto; font-size: 17px; font-weight: 700; text-align: left; }
.pf-rail__rule { height: 1px; background: var(--on-rail-divider, rgba(255,255,255,.22)); }
.pf-rail__list { list-style: none; margin: 14px 0 0; padding: 0 0 0 10px; display: flex; flex-direction: column; gap: 4px; }
.pf-rail__item { position: relative; display: flex; align-items: center; gap: 12px; height: 46px; margin-right: 10px; padding: 0 14px; border-radius: var(--radius-lg, 10px); color: var(--neutral-0, #fff); font-weight: 500; text-decoration: none; }
.pf-rail__item:hover { background: var(--on-rail-hover, rgba(255,255,255,.14)); }
.pf-rail__item[aria-current="page"] { margin-right: 0; border-radius: 10px 0 0 10px; background: var(--neutral-0, #fff); color: var(--brand-red, #e3122b); font-weight: 700; }
.pf-rail--collapsed .pf-rail__item { justify-content: center; padding: 0; } .pf-rail--collapsed .pf-rail__label, .pf-rail--collapsed .pf-rail__appname, .pf-rail--collapsed .pf-rail__app > .pf-svg { display: none; }
.pf-rail--collapsed .pf-rail__app { justify-content: center; padding: 0; }
.pf-rail__ic { position: relative; flex: none; display: inline-flex; width: 22px; height: 22px; align-items: center; justify-content: center; }
.pf-rail__ic .pf-badge { position: absolute; top: -8px; left: 12px; height: 18px; padding: 0 5px; }
.pf-rail__spacer { flex: 1 1 auto; min-height: 24px; }
.pf-rail__collapse { display: inline-flex; align-items: center; justify-content: center; width: calc(100% - 20px); height: 36px; margin: 0 10px 14px; border: 0; border-radius: var(--radius-lg, 10px); background: var(--on-rail-hover, rgba(255,255,255,.14)); color: var(--neutral-0, #fff); cursor: pointer; }
.pf-rail--collapsed .pf-rail__collapse { width: 40px; margin: 0 16px 14px; }
.pf-foot { display: flex; flex-direction: column; gap: 4px; padding: 0 0 14px 10px; }
.pf-foot__group { display: flex; flex-direction: column; gap: 4px; padding: 14px 0 6px; border-top: 1px solid var(--on-rail-divider, rgba(255,255,255,.22)); }
.pf-foot__row { display: flex; align-items: center; gap: 12px; height: 46px; margin-right: 10px; padding: 0 14px; border: 0; border-radius: var(--radius-lg, 10px); background: transparent; font: inherit; color: var(--neutral-0, #fff); text-align: left; text-decoration: none; cursor: pointer; }
.pf-foot__row--lg { height: 50px; font-size: 15px; }
.pf-foot__row:hover { background: var(--on-rail-hover, rgba(255,255,255,.14)); }
.pf-foot__profile { display: flex; align-items: center; gap: 14px; min-height: 64px; margin: 6px 10px 2px 0; padding: 0 14px; border: 0; border-radius: var(--radius-xl, 12px); background: transparent; font: inherit; color: var(--neutral-0, #fff); text-align: left; cursor: pointer; }
.pf-foot__profile strong { display: block; font-size: 15px; } .pf-foot__profile span span { color: var(--on-rail-muted, rgba(255,255,255,.85)); }
.pf-kbd { margin-left: auto; display: inline-flex; align-items: center; justify-content: center; min-width: 24px; height: 24px; padding: 0 5px; border: 1px solid var(--on-rail-muted, rgba(255,255,255,.85)); border-radius: var(--radius-sm, 6px); font-family: ui-monospace, Menlo, monospace; color: rgba(255,255,255,.9); }
.pf-foot__version { padding-top: 14px; text-align: center; font-weight: 400; color: var(--on-rail-muted, rgba(255,255,255,.85)); }
.pf-tabbar { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); height: 72px; padding: 0 6px; background: linear-gradient(90deg, var(--brand-red, #e3122b) 0%, var(--brand-rail-end, #e8457e) 100%); }
.pf-tabbar button { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; border: 0; background: transparent; font: inherit; font-weight: 600; color: var(--neutral-0, #fff); cursor: pointer; }
.pf-tabbar__pill { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 30px; border-radius: var(--radius-pill, 999px); color: var(--neutral-0, #fff); }
.pf-tabbar button[aria-current="page"] .pf-tabbar__pill { background: var(--neutral-0, #fff); color: var(--brand-red, #e3122b); }
.pf-tabbar .pf-badge { position: absolute; top: 8px; left: calc(50% + 6px); height: 18px; padding: 0 5px; }

/* ThemeSwitcher */
.pf-themes { display: flex; flex-direction: column; gap: 14px; }
.pf-themes__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; max-width: 720px; }
.pf-themes__grid--wide { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); max-width: none; }
.pf-themeopt { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 12px; border: 1px solid var(--neutral-200, #e4e1d8); border-radius: var(--radius-lg, 10px); background: var(--neutral-0, #fff); font: inherit; text-align: left; cursor: pointer; }
.pf-themeopt[aria-checked="true"] { border: 2px solid var(--brand-red, #e3122b); padding: 11px; }
.pf-themeopt strong { font-weight: 600; } .pf-themeopt > span:last-child { color: var(--neutral-600, #6b6963); }
.pf-swatch { display: flex; width: 100%; height: 40px; border: 1px solid var(--neutral-200, #e4e1d8); border-radius: var(--radius-md, 8px); overflow: hidden; }
.pf-swatch i { display: block; } .pf-swatch i:nth-child(1) { flex: 2; } .pf-swatch i:nth-child(2) { flex: 2; background: var(--neutral-0, #fff); } .pf-swatch i:nth-child(3), .pf-swatch i:nth-child(4) { flex: 1; }
.pf-rail--collapsed .pf-foot { padding-left: 0; }
.pf-rail--collapsed .pf-foot__row, .pf-rail--collapsed .pf-foot__profile { justify-content: center; margin-right: 0; padding: 0; }
.pf-rail--collapsed .pf-kbd { display: none; }

/* ---------- Forms and feedback ---------- */
/* InlineAlert */
.pf-alert { display: flex; align-items: flex-start; gap: 8px; padding: 10px 14px; border-radius: var(--radius-md, 8px); font-weight: 600; line-height: 20px; }
.pf-alert .pf-svg { margin-top: 2px; }
.pf-alert--danger { background: var(--feedback-danger-bg, #ffeded); color: var(--feedback-danger, #b30000); }
.pf-alert--warning { background: var(--feedback-warning-bg, #fff4e0); color: var(--feedback-warning, #8a4b00); }
.pf-alert--info { background: var(--feedback-info-bg, #e3f1ff); color: var(--feedback-info, #0b4f8a); }

/* FormField */
.pf-field { display: flex; flex-direction: column; gap: 6px; }
.pf-field__label { display: flex; align-items: baseline; gap: 6px; font-weight: 700; color: var(--neutral-900, #1a1a1a); }
.pf-field__opt { font-weight: 500; color: var(--neutral-600, #6b6963); }
.pf-field__req { margin-left: -3px; font-weight: 700; color: var(--feedback-danger, #b30000); }
.pf-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.pf-field__count { margin-left: auto; font-weight: 500; color: var(--neutral-600, #6b6963); font-variant-numeric: tabular-nums; }
.pf-input { width: 100%; height: 36px; padding: 0 12px; border: 1px solid var(--neutral-300, #d8d4c8); border-radius: var(--radius-md, 8px); background: var(--neutral-0, #fff); font: inherit; color: var(--neutral-900, #1a1a1a); }
textarea.pf-input { height: auto; min-height: 80px; padding: 9px 12px; line-height: 20px; resize: vertical; }
.pf-input::placeholder { color: var(--neutral-500, #8c8a83); }
.pf-input:focus { outline: none; border-color: var(--brand-gold, #b69b56); box-shadow: 0 0 0 1px var(--brand-gold, #b69b56), var(--focus-ring, 0 0 0 3px rgba(182,155,86,.22)); }
.pf-input[aria-invalid="true"] { border-color: var(--feedback-danger, #b30000); }
.pf-input[readonly] { background: var(--neutral-50, #f7f6f4); color: var(--neutral-700, #5d5c58); }
.pf-field__hint { color: var(--neutral-600, #6b6963); }
.pf-field__error { display: flex; align-items: flex-start; gap: 6px; font-weight: 600; color: var(--feedback-danger, #b30000); }
.pf-field__error .pf-svg { margin-top: 3px; }

/* RadioCard */
.pf-radios { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.pf-radio { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 44px; padding: 10px 14px; border: 1px solid var(--neutral-200, #e4e1d8); border-radius: var(--radius-md, 8px); background: var(--neutral-0, #fff); font: inherit; font-weight: 600; color: var(--neutral-900, #1a1a1a); text-align: left; cursor: pointer; }
.pf-radio__box { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border: 1.5px solid var(--neutral-400, #c9c5ba); border-radius: var(--radius-pill, 999px); background: var(--neutral-0, #fff); }
.pf-radio__box::after { content: ""; width: 8px; height: 8px; border-radius: var(--radius-pill, 999px); background: transparent; }
.pf-radio[aria-checked="true"] { border-color: var(--brand-gold, #b69b56); background: var(--brand-gold-tint, #fbf4e6); }
.pf-radio[aria-checked="true"] .pf-radio__box { border-color: var(--brand-gold, #b69b56); }
.pf-radio[aria-checked="true"] .pf-radio__box::after { background: var(--brand-gold, #b69b56); }
.pf-radio:focus-visible { outline: none; box-shadow: 0 0 0 1px var(--brand-gold, #b69b56), var(--focus-ring, 0 0 0 3px rgba(182,155,86,.22)); }
.pf-radios[aria-invalid="true"] .pf-radio { border-color: var(--feedback-danger, #b30000); }
@media (max-width: 600px) { .pf-radios { grid-template-columns: 1fr; } }

/* FileField + Chip file */
.pf-files__limits { color: var(--neutral-600, #6b6963); }
.pf-files__list { display: flex; flex-wrap: wrap; gap: 6px; }
.pf-chip--file { height: 24px; gap: 6px; padding: 0 2px 0 4px; border: 1px solid var(--neutral-200, #e4e1d8); background: var(--neutral-50, #f7f6f4); color: var(--neutral-900, #1a1a1a); font-weight: 500; cursor: default; }
.pf-chip__type { display: inline-flex; align-items: center; height: 18px; padding: 0 4px; border-radius: var(--radius-xs, 4px); background: var(--neutral-200, #e4e1d8); color: var(--neutral-800, #3a3935); font-size: 14px; line-height: 1; font-weight: 700; }
.pf-chip__size { color: var(--neutral-600, #6b6963); }
.pf-chip__remove { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; padding: 0; border: 0; border-radius: var(--radius-pill, 999px); background: transparent; color: var(--neutral-600, #6b6963); cursor: pointer; }
.pf-chip__remove:hover { background: var(--neutral-200, #e4e1d8); color: var(--neutral-900, #1a1a1a); }
@media (max-width: 600px) { .pf-chip--file { height: 36px; } .pf-chip__remove { width: 32px; height: 32px; } }

/* Dialog */
.pf-scrim { display: flex; align-items: center; justify-content: center; padding: 24px; background: color-mix(in srgb, var(--neutral-900, #1a1a1a) 40%, transparent); }
.pf-dialog { display: flex; flex-direction: column; width: 100%; max-width: 640px; max-height: calc(100vh - 48px); border: 1px solid var(--neutral-300, #d8d4c8); border-radius: var(--radius-2xl, 16px); background: var(--neutral-0, #fff); box-shadow: var(--elevation-5, 0 15px 50px rgba(0,0,0,.18)); overflow: hidden; }
.pf-dialog__head { display: flex; align-items: flex-start; gap: 16px; padding: 20px 24px 16px; }
.pf-dialog__head > div { flex: 1 1 auto; min-width: 0; }
.pf-dialog__title { font-family: var(--font-display, Outfit, "IBM Plex Sans", sans-serif); margin: 0; font-size: 18px; line-height: 26px; font-weight: 700; }
.pf-dialog__lede { margin: 2px 0 0; color: var(--neutral-600, #6b6963); }
.pf-dialog__body { flex: 1 1 auto; overflow-y: auto; display: flex; flex-direction: column; gap: 18px; padding: 20px 24px; border-top: 1px solid var(--neutral-200, #e4e1d8); }
.pf-dialog__foot { display: flex; flex-direction: column; gap: 12px; padding: 16px 24px 20px; border-top: 1px solid var(--neutral-200, #e4e1d8); }
.pf-dialog__actions { display: flex; align-items: center; gap: 12px; }
.pf-dialog__status { flex: 1 1 auto; color: var(--neutral-600, #6b6963); }
@media (max-width: 600px) {
  .pf-scrim { padding: 0; align-items: stretch; }
  .pf-dialog { max-width: none; max-height: none; min-height: 100vh; border: 0; border-radius: 0; }
  .pf-dialog__head .pf-btn--icon { width: 44px; height: 44px; }
  .pf-dialog__actions { flex-direction: column; align-items: stretch; }
  .pf-dialog__actions .pf-btn--primary { width: 100%; height: 44px; }
}

/* Toast */
.pf-toasts { position: fixed; left: 50%; bottom: 24px; z-index: 90; display: flex; flex-direction: column; gap: 8px; transform: translateX(-50%); }
.pf-toast { --acc: var(--state-done, #2e8b47); display: flex; align-items: flex-start; gap: 10px; width: min(480px, calc(100vw - 32px)); padding: 12px 12px 12px 14px; border: 1px solid var(--neutral-300, #d8d4c8); border-left: 4px solid var(--acc); border-radius: var(--radius-xl, 12px); background: var(--neutral-0, #fff); box-shadow: var(--elevation-4, 0 12px 32px rgba(0,0,0,.22)); color: var(--neutral-900, #1a1a1a); }
.pf-toast > .pf-svg { margin-top: 2px; color: var(--acc); }
.pf-toast__text { flex: 1 1 auto; }
.pf-toast__close { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; margin: -4px -4px 0 0; padding: 0; border: 0; border-radius: var(--radius-sm, 6px); background: transparent; color: var(--acc); cursor: pointer; }
.pf-toast__close:hover { background: var(--neutral-100, #efeee9); }
.pf-toast--info { --acc: var(--feedback-info, #0b4f8a); }
.pf-toast--error { --acc: var(--feedback-danger, #b30000); }
@media (max-width: 600px) { .pf-toasts { bottom: 88px; } }

/* FormGroup */
.pf-groups { display: flex; flex-direction: column; gap: 22px; }
.pf-group { min-width: 0; margin: 0; padding: 0; border: 0; display: flex; flex-direction: column; gap: 6px; }
.pf-group > legend { float: left; width: 100%; padding: 0 0 4px; font-size: 14px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--neutral-600, #6b6963); }
.pf-group > legend + * { clear: both; }
.pf-group__hint { margin: -2px 0 4px; color: var(--neutral-600, #6b6963); }
.pf-group__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.pf-group--divided + .pf-group--divided { padding-top: 22px; border-top: 1px solid var(--neutral-100, #efeee9); }
.pf-group[aria-invalid="true"] > legend { color: var(--feedback-danger, #b30000); }
@media (max-width: 600px) { .pf-group__grid { grid-template-columns: 1fr; } }

/* FormFieldLegenda */
.pf-legenda { display: flex; align-items: flex-start; gap: 6px; font-weight: 600; line-height: 20px; }
.pf-legenda > .pf-svg { margin-top: 3px; }
.pf-legenda--info { color: var(--feedback-info, #0b4f8a); }
.pf-legenda--warning { color: var(--feedback-warning, #8a4b00); }
.pf-legenda--danger { color: var(--feedback-danger, #b30000); }
.pf-legenda--success { color: var(--feedback-success, #2f6b18); }
.pf-legenda__more { position: relative; flex: none; display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; margin-left: 2px; padding: 0; border: 0; border-radius: var(--radius-pill, 999px); background: transparent; color: inherit; cursor: help; }
.pf-legenda__more:hover, .pf-legenda__more:focus-visible { background: color-mix(in srgb, currentColor 12%, transparent); }
.pf-legenda__more:focus-visible { outline: 2px solid var(--brand-gold, #b69b56); outline-offset: 1px; }
.pf-legenda__tip { position: absolute; top: calc(100% + 6px); left: -8px; z-index: 80; width: max-content; max-width: 280px; padding: 6px 10px; border-radius: var(--radius-sm, 6px); background: var(--neutral-900, #1a1a1a); color: var(--neutral-0, #fff); font-size: 14px; font-weight: 500; line-height: 20px; text-align: left; box-shadow: var(--elevation-2, 0 2px 8px rgba(0,0,0,.25)); visibility: hidden; opacity: 0; transition: opacity .15s ease; pointer-events: none; }
.pf-legenda__more:hover .pf-legenda__tip, .pf-legenda__more:focus .pf-legenda__tip { visibility: visible; opacity: 1; }

/* File-type badge (FileField list, file Chip) */
.pf-filetype, .pf-chip__type { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 20px; padding: 0 6px; border-radius: var(--radius-xs, 4px); font-size: 14px; line-height: 1; font-weight: 700; letter-spacing: .02em; }
.pf-chip__type { min-width: 0; height: 18px; padding: 0 4px; }
.pf-filetype--pdf { background: var(--filetype-pdf-bg, #fde7e7); color: var(--filetype-pdf, #a3161a); }
.pf-filetype--image { background: var(--filetype-image-bg, #e1f0fa); color: var(--filetype-image, #0b5f8a); }
.pf-filetype--html { background: var(--filetype-html-bg, #fff1dc); color: var(--filetype-html, #8a4b00); }
.pf-filetype--text { background: var(--filetype-text-bg, #efeee9); color: var(--filetype-text, #3a3935); }

/* FileField drop area */
.pf-drop { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 20px 16px; border: 1.5px dashed var(--neutral-400, #c9c5ba); border-radius: var(--radius-md, 8px); background: var(--neutral-0, #fff); text-align: center; transition: background .15s ease, border-color .15s ease; }
.pf-drop[data-over="true"] { border-color: var(--brand-gold, #b69b56); border-style: solid; background: var(--brand-gold-tint, #fbf4e6); }
.pf-drop[aria-invalid="true"] { border-color: var(--feedback-danger, #b30000); }
.pf-drop__icon { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: var(--radius-pill, 999px); background: var(--neutral-100, #efeee9); color: var(--neutral-700, #5d5c58); }
.pf-drop[data-over="true"] .pf-drop__icon { background: var(--neutral-0, #fff); color: var(--brand-gold-ink, #7a5e17); }
.pf-drop__text { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; font-weight: 600; }
.pf-drop__limits { color: var(--neutral-600, #6b6963); }
.pf-drop--filled { align-items: stretch; gap: 0; padding: 12px 12px 12px; text-align: left; }
.pf-drop--filled .pf-drop__add { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; padding: 0 4px 10px; border-bottom: 1px solid var(--neutral-200, #e4e1d8); }
.pf-drop__legenda { margin: 0; justify-content: center; text-align: left; max-width: 46ch; }
.pf-drop--filled .pf-drop__legenda { justify-content: flex-start; max-width: none; padding: 10px 4px 0; }
.pf-drop--filled .pf-drop__icon { width: 28px; height: 28px; }
.pf-drop--filled .pf-drop__limits { flex-basis: 100%; }
.pf-filelist { margin: 0; padding: 0; list-style: none; }
.pf-file { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 10px; min-height: 44px; padding: 6px 4px; border-bottom: 1px solid var(--neutral-100, #efeee9); }
.pf-drop--filled .pf-filelist { padding-top: 4px; }
.pf-file__name { font-weight: 500; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.pf-file__size { color: var(--neutral-600, #6b6963); font-variant-numeric: tabular-nums; white-space: nowrap; }
.pf-file__remove { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: var(--radius-sm, 6px); background: transparent; color: var(--neutral-600, #6b6963); cursor: pointer; }
.pf-file__remove:hover { background: var(--neutral-100, #efeee9); color: var(--feedback-danger, #b30000); }
.pf-file__remove:focus-visible { outline: 2px solid var(--brand-gold, #b69b56); outline-offset: 1px; }
@media (max-width: 600px) { .pf-file__remove { width: 40px; height: 40px; } .pf-drop__text { flex-direction: column; } }

/* Level tag shown at the top of every component card */
.pf-level { display: inline-flex; align-items: center; height: 22px; margin: -8px 0 12px; padding: 0 8px; border-radius: var(--radius-xs, 4px); font-size: 14px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; background: var(--neutral-100, #efeee9); color: var(--neutral-700, #5d5c58); }
.pf-level--atom { background: var(--brand-gold-tint, #fbf4e6); color: var(--brand-gold-ink, #7a5e17); }
.pf-level--molecule { background: var(--feedback-info-bg, #e3f1ff); color: var(--feedback-info, #0b4f8a); }
.pf-level--organism { background: var(--brand-burgundy, #4b0a1f); color: var(--neutral-0, #fff); }
.pf-level--foundation { background: var(--neutral-100, #efeee9); color: var(--neutral-800, #3a3935); }
.pf-level + * { margin-top: 0; }
.pf > .pf-level { display: flex; width: max-content; }

/* InlineAlert: left edge in the variant colour, as on Toast */
.pf-alert { border-left: 4px solid currentColor; padding-left: 12px; }
.pf-alert--success { background: var(--feedback-success-bg, #eaf8e1); color: var(--feedback-success, #2f6b18); }
.pf-alert--neutral { background: var(--neutral-100, #efeee9); color: var(--neutral-800, #3a3935); }

/* Toast variants: success · info · warning · danger · neutral (--error kept as an alias of --danger) */
.pf-toast--success { --acc: var(--feedback-success, #2f6b18); }
.pf-toast--warning { --acc: var(--feedback-warning, #8a4b00); }
.pf-toast--danger, .pf-toast--error { --acc: var(--feedback-danger, #b30000); }
.pf-toast--neutral { --acc: var(--neutral-800, #3a3935); }

/* FormGroupLabel: the heading of a FormGroup (use on its <legend>) */
.pf-group-label { display: flex; align-items: baseline; gap: 6px; float: left; width: 100%; margin: 0; padding: 0 0 4px; font-size: 14px; line-height: 20px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--neutral-600, #6b6963); }
.pf-group-label + * { clear: both; }
.pf-group-label .pf-field__req { margin-left: -3px; letter-spacing: 0; }
.pf-group-label__opt { font-weight: 500; letter-spacing: 0; text-transform: none; }
.pf-group-label__count { margin-left: auto; font-weight: 500; letter-spacing: 0; text-transform: none; font-variant-numeric: tabular-nums; }
.pf-group-label--invalid, .pf-group[aria-invalid="true"] > .pf-group-label { color: var(--feedback-danger, #b30000); }

/* FormGroupLegenda: the explanation line under a FormGroupLabel */
.pf-group-legenda { position: relative; display: flex; align-items: flex-start; gap: 6px; margin: -2px 0 6px; font-size: 14px; line-height: 20px; font-weight: 500; color: var(--neutral-600, #6b6963); }
.pf-group-legenda > .pf-svg { margin-top: 3px; }
.pf-group-legenda--info { color: var(--feedback-info, #0b4f8a); }
.pf-group-legenda--warning { color: var(--feedback-warning, #8a4b00); }
.pf-group-legenda--danger { color: var(--feedback-danger, #b30000); font-weight: 600; }
.pf-group-legenda--success { color: var(--feedback-success, #2f6b18); }
/* more info without the (i) icon: the sentence itself is the hover target */
.pf-tip-text { position: relative; text-decoration: underline dotted; text-underline-offset: 3px; cursor: help; border-radius: 2px; }
.pf-tip-text:focus-visible { outline: 2px solid var(--brand-gold, #b69b56); outline-offset: 2px; }
.pf-tip-text:hover .pf-legenda__tip, .pf-tip-text:focus .pf-legenda__tip { visibility: visible; opacity: 1; }

/* DialogTitle and DialogSubtitle */
.pf-dialog-title { font-family: var(--font-display, Outfit, "IBM Plex Sans", sans-serif); display: flex; align-items: center; gap: 8px; margin: 0; font-size: 18px; line-height: 26px; font-weight: 700; color: var(--neutral-900, #1a1a1a); }
.pf-dialog-title .pf-chip--id { flex: none; }
.pf-dialog-subtitle { margin: 2px 0 0; font-size: 14px; line-height: 20px; font-weight: 500; color: var(--neutral-600, #6b6963); }

/* DialogFooter = DialogFooterLegenda (left) + DialogFooterButtons (right) */
.pf-dfoot { display: flex; align-items: center; gap: 12px; padding: 16px 24px 20px; border-top: 1px solid var(--neutral-200, #e4e1d8); background: var(--neutral-0, #fff); }
.pf-dialog__alert { padding: 16px 24px 0; border-top: 1px solid var(--neutral-200, #e4e1d8); }
.pf-dialog__alert + .pf-dfoot { border-top: 0; padding-top: 12px; }
.pf-dfoot-legenda { flex: 1 1 auto; min-width: 0; display: flex; align-items: flex-start; gap: 6px; margin: 0; font-size: 14px; line-height: 20px; font-weight: 500; color: var(--neutral-600, #6b6963); }
.pf-dfoot-legenda > .pf-svg { margin-top: 3px; }
.pf-dfoot-legenda--info { color: var(--feedback-info, #0b4f8a); }
.pf-dfoot-legenda--warning { color: var(--feedback-warning, #8a4b00); }
.pf-dfoot-legenda--danger { color: var(--feedback-danger, #b30000); font-weight: 600; }
.pf-dfoot-legenda--success { color: var(--feedback-success, #2f6b18); }
.pf-dfoot-buttons { flex: none; display: flex; align-items: center; gap: 8px; margin-left: auto; }
.pf-dfoot-buttons--stacked { flex-direction: column-reverse; align-items: stretch; width: 100%; margin-left: 0; }
.pf-dfoot-buttons--stacked .pf-btn { width: 100%; height: 44px; }
.pf-dfoot--stacked { flex-direction: column; align-items: stretch; }
@media (max-width: 600px) {
  .pf-dfoot { flex-direction: column; align-items: stretch; }
  .pf-dfoot-buttons { flex-direction: column-reverse; align-items: stretch; width: 100%; margin-left: 0; }
  .pf-dfoot-buttons .pf-btn { width: 100%; height: 44px; }
}

/* Avatar with a photo (human or agent): the photo fills the shape inside the ring */
.pf-avatar--photo { padding: 1px; overflow: visible; background: var(--neutral-100, #efeee9); }
.pf-avatar--photo > img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.pf-avatar--agent.pf-avatar--photo > img { border-radius: 4px; }
.pf-avatar--lg.pf-avatar--agent.pf-avatar--photo > img { border-radius: 8px; }
.pf-avgrid { display: grid; grid-template-columns: 90px repeat(3, minmax(0, 1fr)); gap: 14px 16px; align-items: center; }
.pf-avgrid__h { font-size: 14px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--neutral-600, #6b6963); }
.pf-avgrid__cell { display: flex; align-items: center; gap: 18px; padding-top: 10px; min-height: 48px; }

/* Neutral variant for the message lines (InlineAlert and Toast already have one) */
.pf-legenda--neutral { color: var(--neutral-700, #5d5c58); }
.pf-group-legenda--neutral, .pf-dfoot-legenda--neutral { color: var(--neutral-600, #6b6963); }

/* Optional marker: a small blue dashed circle after the label (the counterpart of the red required asterisk) */
.pf-opt-mark { display: inline-flex; align-self: center; color: var(--feedback-info, #0b4f8a); }
.pf-opt-mark .pf-svg { display: block; }

/* Relations footer on every component card */
.pf-rel { display: flex; flex-direction: column; gap: 10px; margin: 28px -20px -20px; padding: 14px 20px 16px; border-top: 1px solid var(--neutral-200, #e4e1d8); background: var(--neutral-0, #fff); }
.pf-rel__row { display: grid; grid-template-columns: 104px minmax(0, 1fr); align-items: start; gap: 12px; }
.pf-rel__k { padding-top: 3px; font-size: 14px; line-height: 20px; font-weight: 700; letter-spacing: .06em; color: var(--neutral-600, #6b6963); }
.pf-rel__list { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.pf-rel__item { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 8px 0 4px; border: 1px solid var(--neutral-200, #e4e1d8); border-radius: var(--radius-sm, 6px); background: var(--neutral-50, #f7f6f4); font-weight: 600; color: var(--neutral-900, #1a1a1a); }
.pf-rel__lvl { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: var(--radius-xs, 4px); font-size: 14px; font-weight: 800; line-height: 1; }
.pf-rel__lvl--atom { background: var(--brand-gold-tint, #fbf4e6); color: var(--brand-gold-ink, #7a5e17); }
.pf-rel__lvl--molecule { background: var(--feedback-info-bg, #e3f1ff); color: var(--feedback-info, #0b4f8a); }
.pf-rel__lvl--organism { background: var(--brand-burgundy, #4b0a1f); color: var(--neutral-0, #fff); }
.pf-rel__none { color: var(--neutral-600, #6b6963); }

/* ---------- HELP-93 / HELP-102 / HELP-103 ---------- */
/* Button: busy state (any variant) */
.pf-spin { flex: none; display: inline-block; width: 14px; height: 14px; border: 2px solid currentColor; border-right-color: transparent; border-radius: var(--radius-pill, 999px); animation: pf-spin .8s linear infinite; }
@keyframes pf-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .pf-spin { animation: none; } }
.pf-btn[aria-busy="true"], .pf-btn[aria-busy="true"][aria-disabled="true"] { opacity: 1; cursor: progress; }
.pf-btn[aria-busy="true"]:hover { background-image: none; }

/* Button: ghost-danger */
.pf-btn--ghost-danger { padding: 0 10px; border: 0; background: transparent; color: var(--feedback-danger, #b30000); }
.pf-btn--ghost-danger:hover { background: var(--feedback-danger-bg, #ffeded); }
.pf-btn--ghost-danger.pf-btn--square { padding: 0; }

/* Button: fab (floating action, phones) */
.pf-btn--fab { width: 56px; height: 56px; padding: 0; border: 0; border-radius: var(--radius-pill, 999px); background: linear-gradient(135deg, var(--brand-gradient-from, #fa0000), var(--brand-gradient-to, #ff2e83)); color: var(--neutral-0, #fff); box-shadow: var(--elevation-4, 0 12px 32px rgba(0,0,0,.22)); }
.pf-btn--fab .pf-svg { width: 24px; height: 24px; }
.pf-btn--fab .pf-spin { width: 22px; height: 22px; }
.pf-btn--fab:focus-visible { box-shadow: 0 0 0 2px var(--neutral-0, #fff), 0 0 0 4px var(--brand-gold, #b69b56), var(--elevation-4, 0 12px 32px rgba(0,0,0,.22)); }
.pf-btn--fab.pf-btn--docked { position: fixed; right: 16px; bottom: calc(72px + env(safe-area-inset-bottom, 0px)); z-index: var(--z-raised, 5); }
@media (min-width: 601px) { .pf-btn--fab.pf-btn--docked { display: none; } }

/* InlineAlert: one action */
.pf-alert--action { flex-wrap: wrap; align-items: center; row-gap: 8px; }
.pf-alert--action > .pf-svg { align-self: flex-start; margin-top: 2px; }
.pf-alert--action > span:first-of-type { flex: 1 1 220px; min-width: 0; }
.pf-alert__act { flex: none; margin-left: auto; }
.pf-alert__act .pf-btn { height: 30px; padding: 0 10px; gap: 6px; font-weight: 600; }

/* EmptyState: one action */
.pf-empty__act { margin-top: 8px; }

/* ViewRibbon: one extra action before the primary */
.pf-ribbon__extra { display: inline-flex; align-items: center; flex: none; padding-left: 12px; border-left: var(--border-subtle, 1px solid #e4e1d8); }
@media (max-width: 600px) { .pf-ribbon__extra { display: none; } }

/* Dialog: manage variant and sheet behaviour */
.pf-dialog--manage .pf-dialog__body { gap: 14px; }
.pf-dialog__grab { display: none; }
.pf-dialog--sheet { position: relative; max-width: none; border: 0; border-radius: 0; }
.pf-dialog--sheet .pf-dialog__grab { display: block; align-self: center; flex: none; width: 36px; height: 4px; margin-top: 8px; border-radius: var(--radius-pill, 999px); background: var(--neutral-300, #d8d4c8); }
.pf-dialog--sheet .pf-dialog__head { padding-top: 12px; }
.pf-dialog--sheet .pf-dialog__head .pf-btn--icon { width: 44px; height: 44px; }
.pf-dialog--sheet .pf-dfoot { position: sticky; bottom: var(--kb, 0px); flex-direction: column; align-items: stretch; padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px)); }
.pf-dialog--sheet .pf-dfoot-buttons { flex-direction: column; align-items: stretch; width: 100%; margin-left: 0; }
.pf-dialog--sheet .pf-dfoot .pf-btn { width: 100%; height: 44px; }

/* InlineEditor */
.pf-ied { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.pf-ied__row { display: flex; align-items: center; gap: 6px; min-width: 0; }
.pf-ied__row .pf-input { flex: 1 1 auto; min-width: 0; height: 32px; padding: 0 8px; }
.pf-ied__row .pf-btn { height: 32px; flex: none; }
.pf-ied__row .pf-btn--square { width: 32px; }
.pf-ied--labelled .pf-ied__row .pf-input, .pf-ied--labelled .pf-ied__row .pf-btn { height: 36px; }
.pf-ied .pf-legenda { margin: 0; }

/* Tag */
.pf-tag { display: inline-flex; align-items: center; flex: none; height: 22px; padding: 0 8px; border: 1px dashed var(--neutral-400, #c9c5ba); border-radius: var(--radius-pill, 999px); background: var(--neutral-0, #fff); color: var(--neutral-700, #5d5c58); font-size: 14px; line-height: 1; font-weight: 600; white-space: nowrap; vertical-align: middle; }

/* ManageList */
.pf-mlist { display: flex; flex-direction: column; gap: 12px; }
.pf-mlist__add { display: flex; align-items: flex-end; gap: 8px; }
.pf-mlist__add .pf-field { flex: 1 1 auto; min-width: 0; }
.pf-mlist__box { border: var(--border-default, 1px solid #d8d4c8); border-radius: var(--radius-md, 8px); background: var(--neutral-0, #fff); overflow: hidden; }
.pf-mlist__items { margin: 0; padding: 0; list-style: none; }
.pf-mlist__group { margin: 0; padding: 6px 14px; border-top: var(--border-subtle, 1px solid #e4e1d8); background: var(--neutral-100, #efeee9); }
.pf-mlist__group .pf-group-label { float: none; padding: 0; }
.pf-mrow { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; min-height: 48px; padding: 6px 8px 6px 14px; }
.pf-mrow + .pf-mrow { border-top: var(--border-subtle, 1px solid #e4e1d8); }
.pf-mrow__name { flex: 1 1 160px; min-width: 0; display: flex; align-items: center; gap: 8px; font-weight: 600; }
.pf-mrow__name > span:first-child { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.pf-mrow__acts { display: inline-flex; align-items: center; gap: 4px; flex: none; margin-left: auto; }
.pf-mrow > .pf-legenda { flex-basis: 100%; margin: 0 0 4px; }
.pf-mrow--editing { display: block; padding: 8px 8px 8px 14px; background: var(--brand-gold-tint, #fbf4e6); box-shadow: inset 3px 0 0 var(--brand-gold, #b69b56); }
.pf-mrow--archived .pf-mrow__name { font-weight: 500; color: var(--neutral-600, #6b6963); }
@media (max-width: 600px) { .pf-mlist__add { flex-wrap: wrap; } .pf-mlist__add .pf-btn { width: 100%; } }

/* ---------- HELP-72 / 87 / 89 / 98 + HELP-103 P3, P9 ---------- */
/* FormField: select and date */
.pf-select { position: relative; display: block; }
.pf-select select.pf-input { appearance: none; -webkit-appearance: none; padding-right: 34px; cursor: pointer; }
.pf-select > .pf-svg { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); color: var(--neutral-600, #6b6963); pointer-events: none; }
input[type="date"].pf-input { padding-right: 8px; }
select.pf-input:invalid, .pf-select--empty select.pf-input { color: var(--neutral-600, #6b6963); }

/* StatusIcon: small, for rows and heads */
.pf-sicon--sm { width: 20px; height: 20px; }

/* RequirementCard: busy, changed, dragging */
.pf-card--busy > :not(.pf-card__busy) { opacity: .6; }
.pf-card--busy { cursor: progress; }
.pf-card__busy { position: absolute; top: 7px; right: 8px; z-index: 6; display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 9px; border: var(--border-default, 1px solid #d8d4c8); border-radius: var(--radius-pill, 999px); background: var(--neutral-0, #fff); color: var(--neutral-800, #3a3935); font-size: 14px; font-weight: 600; line-height: 1; }
.pf-card__busy .pf-spin { width: 12px; height: 12px; }
.pf-card--changed { animation: pf-flash 1.6s ease-out; }
@keyframes pf-flash { 0%, 30% { box-shadow: 0 0 0 2px var(--brand-gold, #b69b56); background: var(--brand-gold-tint, #fbf4e6); } 100% { box-shadow: var(--elevation-1, 0 1px 2px rgba(164,140,78,.10)); } }
@media (prefers-reduced-motion: reduce) { .pf-card--changed { animation: none; box-shadow: 0 0 0 2px var(--brand-gold, #b69b56); } }
.pf-card--dragging { transform: rotate(-2deg); border-color: var(--brand-gold, #b69b56); box-shadow: var(--elevation-4, 0 12px 32px rgba(0,0,0,.22)); cursor: grabbing; }

/* MenuButton: labelled */
.pf-btn--menu { padding: 0 10px 0 12px; border: 1px solid var(--neutral-300, #d8d4c8); background: var(--neutral-0, #fff); color: var(--neutral-700, #5d5c58); font-weight: 500; }
.pf-btn--menu b { font-weight: 700; color: var(--neutral-900, #1a1a1a); }
.pf-btn--menu:hover { border-color: var(--brand-gold, #b69b56); }
.pf-btn--menu > .pf-svg:last-of-type { color: var(--neutral-600, #6b6963); }

/* Chip: choice (one of many) */
.pf-chips { display: flex; flex-wrap: wrap; gap: 6px; }

/* MultiSelect: single choice and list lines */
.pf-ms--single .pf-ms__value { flex: 1 1 auto; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-weight: 500; }
.pf-ms--single .pf-ms__value--empty { color: var(--neutral-600, #6b6963); }
.pf-ms--single .pf-ms__field { cursor: pointer; padding-left: 12px; }
.pf-ms--single .pf-ms__list { position: static; margin-top: 4px; }
.pf-ms--single .pf-opt { min-height: 36px; }
.pf-ms--single .pf-opt__box { display: none; }
.pf-ms--single .pf-opt[aria-selected="true"]::after { content: ""; flex: none; width: 12px; height: 7px; margin-left: auto; border-left: 2px solid var(--brand-gold-ink, #7a5e17); border-bottom: 2px solid var(--brand-gold-ink, #7a5e17); transform: translateY(-2px) rotate(-45deg); }
.pf-opt__sub { color: var(--neutral-600, #6b6963); font-weight: 500; }
.pf-ms__line { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; padding: 8px 10px; color: var(--neutral-600, #6b6963); font-weight: 500; }
.pf-ms__line .pf-spin { width: 12px; height: 12px; }
.pf-ms__line--error { color: var(--feedback-danger, #b30000); font-weight: 600; }
.pf-ms__line > span:not(.pf-spin) { flex: 1 1 180px; min-width: 0; }
.pf-ms__line .pf-btn { height: 30px; padding: 0 10px; gap: 6px; }

/* FormFieldLegenda: one action */
.pf-legenda__act { flex: none; margin: -6px 0 -6px 2px; }
.pf-legenda__act .pf-btn { height: 30px; padding: 0 10px; gap: 6px; }

/* FormGroup: a row of fields */
.pf-group__row { display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); gap: 14px; align-items: start; }
@media (max-width: 600px) { .pf-group__row { grid-template-columns: minmax(0, 1fr); } }

/* RecordHeader: notes row */
.pf-record__notes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.pf-record__notes:empty { display: none; }
.pf-record__notes .pf-alert { padding: 4px 6px 4px 10px; border-left-width: 3px; }
.pf-record__notes .pf-alert__act .pf-btn { height: 28px; }
.pf-record__notes time { font-weight: 500; }
@media (max-width: 600px) { .pf-record__notes .pf-alert__act { display: none; } }

/* ActionsMenu: item with explanation, busy item */
.pf-menu { width: max-content; min-width: 230px; max-width: 320px; }
.pf-menu__item--desc { flex-direction: column; align-items: flex-start; gap: 2px; }
.pf-menu__desc { font-weight: 400; color: var(--neutral-600, #6b6963); white-space: normal; }
.pf-menu__item[aria-busy="true"] { cursor: progress; color: var(--neutral-700, #5d5c58); background: var(--neutral-100, #efeee9); }
.pf-menu__item .pf-menu__row { display: inline-flex; align-items: center; gap: 8px; }
.pf-menu__item .pf-spin { width: 12px; height: 12px; }

/* RefLink: key only */
.pf-ref--key { display: inline; height: auto; padding: 0; border: 0; border-radius: 0; background: none; font-family: var(--font-mono, "JetBrains Mono", ui-monospace, monospace); font-weight: 700; color: var(--brand-burgundy, #4b0a1f); text-decoration: underline; text-decoration-color: var(--brand-sand-underline, #d8b9a0); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.pf-ref--key:hover { text-decoration-color: currentColor; }

/* LoadLine */
.pf-loadline { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 14px; line-height: 20px; font-weight: 500; color: var(--neutral-700, #5d5c58); }
.pf-loadline__state { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.pf-loadline__dot { flex: none; width: 8px; height: 8px; border-radius: var(--radius-pill, 999px); background: var(--state-done, #2e8b47); }
.pf-loadline--live .pf-loadline__state { color: var(--state-done-text, #2f6b18); }
.pf-loadline--off .pf-loadline__state { color: var(--feedback-warning, #8a4b00); }
.pf-loadline--off .pf-loadline__dot { background: transparent; border: 2px solid var(--feedback-warning, #8a4b00); }
.pf-loadline .pf-spin { width: 12px; height: 12px; }
.pf-loadline__sep { color: var(--neutral-500, #8c8a83); }

/* GroupHeader */
.pf-ghead { display: flex; flex-wrap: wrap; align-items: center; gap: 0 12px; min-height: 40px; padding-right: 12px; border-top: var(--border-hairline, 1px solid #efeee9); border-bottom: var(--border-hairline, 1px solid #efeee9); background: var(--neutral-100, #efeee9); }
.pf-ghead__btn { position: sticky; left: 0; z-index: 1; display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 12px; border: 0; background: inherit; font: inherit; font-weight: 700; color: var(--neutral-900, #1a1a1a); cursor: pointer; }
.pf-ghead__btn:focus-visible { outline: 2px solid var(--brand-gold, #b69b56); outline-offset: -2px; }
.pf-ghead__chev { color: var(--neutral-600, #6b6963); transition: transform .15s ease; }
.pf-ghead__btn[aria-expanded="false"] .pf-ghead__chev { transform: rotate(-90deg); }
.pf-ghead__extra { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px; color: var(--neutral-600, #6b6963); font-weight: 500; }
.pf-ghead__hint { color: var(--brand-gold-ink, #7a5e17); font-weight: 600; }
.pf-ghead--archived .pf-ghead__name { color: var(--neutral-600, #6b6963); font-weight: 600; }
.pf-ghead--drop { background: var(--brand-gold-tint, #fbf4e6); outline: 2px dashed var(--brand-gold, #b69b56); outline-offset: -2px; }
.pf-ghead--refused { opacity: .55; cursor: not-allowed; }
.pf-ghead--refused .pf-ghead__btn { cursor: not-allowed; }
.pf-ghead--list { min-height: 40px; border-top: var(--border-subtle, 1px solid #e4e1d8); border-bottom: 0; background: var(--neutral-50, #f7f6f4); }
.pf-ghead--card { border: 0; background: var(--neutral-0, #fff); }
@media (prefers-reduced-motion: reduce) { .pf-ghead__chev { transition: none; } }

/* Board */
.pf-board { --col: 264px; --fold: 44px; position: relative; overflow: auto; background: var(--neutral-50, #f7f6f4); }
.pf-board__grid { display: grid; grid-template-columns: var(--board-cols); column-gap: 12px; width: max-content; min-width: 100%; }
.pf-board__heads { position: sticky; top: 0; z-index: var(--z-raised, 5); display: grid; grid-template-columns: subgrid; grid-column: 1 / -1; row-gap: 8px; padding: 12px 16px 10px; background: var(--neutral-50, #f7f6f4); border-bottom: var(--border-subtle, 1px solid #e4e1d8); }
.pf-board__phase { padding-top: 6px; border-top: 3px solid var(--acc); font-size: 14px; line-height: 20px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--acc-fg); }
.pf-colhead { display: flex; align-items: flex-start; gap: 6px; min-width: 0; }
.pf-colhead__text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; font-weight: 700; }
.pf-colhead__gate { display: inline-flex; align-items: center; gap: 2px; font-weight: 500; color: var(--neutral-600, #6b6963); }
.pf-colhead .pf-badge { margin-left: auto; }
.pf-colhead--folded { justify-content: center; }
.pf-board__lane { grid-column: 1 / -1; }
.pf-board__cells { display: grid; grid-template-columns: subgrid; grid-column: 1 / -1; padding: 10px 16px 14px; }
.pf-bcell { display: flex; flex-direction: column; gap: 10px; min-height: 96px; padding: 8px; border-radius: var(--radius-md, 8px); background: var(--neutral-100, #efeee9); }
.pf-bcell--refused { opacity: .5; cursor: not-allowed; background-image: repeating-linear-gradient(135deg, transparent 0 8px, color-mix(in srgb, var(--neutral-400, #c9c5ba) 60%, transparent) 8px 10px); }
.pf-bfold { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 10px 0; border: var(--border-placeholder, 1.5px dashed #c9c5ba); border-radius: var(--radius-md, 8px); background: transparent; font: inherit; font-weight: 600; color: var(--neutral-700, #5d5c58); cursor: pointer; }
.pf-bfold__name { writing-mode: vertical-rl; transform: rotate(180deg); white-space: nowrap; }
.pf-bclosed { display: flex; flex-direction: column; gap: 8px; }
.pf-bclosed a { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 10px 0; border-radius: var(--radius-md, 8px); background: var(--neutral-100, #efeee9); color: var(--neutral-800, #3a3935); font-weight: 600; text-decoration: none; }
.pf-bclosed a:hover { background: var(--brand-sand, #f6f3eb); }
.pf-bclosed span { writing-mode: vertical-rl; transform: rotate(180deg); white-space: nowrap; }
/* Board on a phone: lane cards with state rows */
.pf-pboard { display: flex; flex-direction: column; gap: 12px; padding: 12px; background: var(--neutral-50, #f7f6f4); }
.pf-plane { overflow: hidden; border: var(--border-default, 1px solid #d8d4c8); border-radius: var(--radius-xl, 12px); background: var(--neutral-0, #fff); }
.pf-pstate { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 12px; border-top: var(--border-subtle, 1px solid #e4e1d8); color: var(--neutral-900, #1a1a1a); text-decoration: none; }
.pf-pstate__text { flex: 1 1 auto; min-width: 0; font-weight: 600; }
.pf-pstate__gate { display: block; font-weight: 500; color: var(--neutral-600, #6b6963); }

/* ---------- HELP-103: ReleaseCard, Steps, Disclosure; RefLink external, DialogFooter sunken, member footer, (i) on its own ---------- */
/* (i) hover on its own (was InfoMark) */
.pf-infomark { display: inline-flex; align-items: center; gap: 2px; color: var(--neutral-700, #5d5c58); font-weight: 600; }
.pf-infomark .pf-legenda__more { color: var(--feedback-info, #0b4f8a); }

/* RefLink: external */
.pf-ref--ext .pf-svg:last-of-type { color: var(--neutral-600, #6b6963); }

/* DialogFooter: sunken (actions strip inside a card) */
.pf-dfoot--sunken { flex-wrap: wrap; gap: 6px 12px; padding: 8px 8px 8px 12px; border: 0; border-radius: var(--radius-md, 8px); background: var(--neutral-100, #efeee9); }
.pf-dfoot--sunken .pf-dfoot-buttons { flex-wrap: wrap; gap: 6px; }
.pf-dfoot--sunken > .pf-alert { flex-basis: 100%; order: 3; }
@media (max-width: 600px) { .pf-dfoot--sunken { display: none; } }

/* RequirementCard: member footer (the card as a member of a release) */
.pf-member { display: flex; flex-direction: column; min-width: 0; }
.pf-member > .pf-card { width: auto; border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.pf-member__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; min-height: 40px; padding: 6px 8px 6px 12px; border: var(--border-default, 1px solid #d8d4c8); border-top: var(--border-hairline, 1px solid #efeee9); border-radius: 0 0 var(--radius-md, 8px) var(--radius-md, 8px); background: var(--card-footer, #fafaf8); color: var(--neutral-700, #5d5c58); }
.pf-member__state { flex: 1 1 160px; min-width: 0; }
.pf-member__foot .pf-btn { height: 30px; margin-left: auto; }
.pf-member__foot .pf-infomark { margin-left: auto; }

/* Steps */
.pf-steps-wrap { container: pf-steps / inline-size; }
.pf-steps { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 0; margin: 0; padding: 0; list-style: none; counter-reset: none; }
.pf-step { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding-right: 16px; }
.pf-step__name, .pf-step__when { display: block; }
.pf-step::after { content: ""; position: absolute; top: 13px; left: 36px; right: 8px; height: 2px; border-radius: 2px; background: var(--neutral-300, #d8d4c8); }
.pf-step:last-child::after { display: none; }
.pf-step__mark { z-index: 1; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border: 2px solid var(--neutral-300, #d8d4c8); border-radius: var(--radius-pill, 999px); background: var(--neutral-0, #fff); color: var(--neutral-600, #6b6963); }
.pf-step__name { font-weight: 700; color: var(--neutral-600, #6b6963); }
.pf-step__when { color: var(--neutral-600, #6b6963); font-weight: 500; }
.pf-step--done .pf-step__mark { border-color: var(--category-done, #5dbb2f); background: var(--category-done, #5dbb2f); color: var(--neutral-0, #fff); }
.pf-step--done .pf-step__name { color: var(--neutral-900, #1a1a1a); }
.pf-step--done::after { background: var(--category-done, #5dbb2f); }
.pf-step--current .pf-step__mark { border-color: var(--brand-gold, #b69b56); background: var(--brand-gold-tint, #fbf4e6); color: var(--brand-gold-ink, #7a5e17); }
.pf-step--current .pf-step__name { color: var(--neutral-900, #1a1a1a); }
@container pf-steps (max-width: 559px) {
  .pf-steps { grid-auto-flow: row; gap: 10px; }
  .pf-step { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 2px 10px; align-items: start; }
  .pf-step__mark { grid-row: span 2; }
  .pf-step::after { top: 32px; bottom: -8px; left: 13px; right: auto; width: 2px; height: auto; }
}

/* Disclosure */
.pf-disc { border: var(--border-default, 1px solid #d8d4c8); border-radius: var(--radius-xl, 12px); background: var(--neutral-0, #fff); }
.pf-disc > summary { display: flex; align-items: center; gap: 10px; padding: 14px 16px; cursor: pointer; list-style: none; border-radius: var(--radius-xl, 12px); }
.pf-disc > summary::-webkit-details-marker { display: none; }
.pf-disc > summary:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--brand-gold, #b69b56), var(--focus-ring, 0 0 0 3px rgba(182,155,86,.22)); }
.pf-disc__chev { color: var(--neutral-600, #6b6963); transform: rotate(-90deg); transition: transform .15s ease; }
.pf-disc[open] .pf-disc__chev { transform: none; }
.pf-disc__title { margin: 0; font-family: var(--font-display, Outfit, "IBM Plex Sans", sans-serif); font-size: 18px; line-height: 26px; font-weight: 700; color: var(--neutral-900, #1a1a1a); }
.pf-disc__body { display: flex; flex-direction: column; gap: 12px; padding: 14px 16px 16px; border-top: var(--border-hairline, 1px solid #efeee9); }
.pf-disc__lede { margin: 0; color: var(--neutral-600, #6b6963); }
@media (prefers-reduced-motion: reduce) { .pf-disc__chev { transition: none; } }

/* ReleaseCard */
.pf-rcard { container: pf-rcard / inline-size; display: flex; flex-direction: column; gap: 14px; padding: 16px; border: var(--border-default, 1px solid #d8d4c8); border-radius: var(--radius-lg, 10px); background: var(--neutral-0, #fff); box-shadow: var(--elevation-1, 0 1px 2px rgba(164,140,78,.10)); }
.pf-rcard__head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.pf-rcard__title { margin: 0; flex: 1 1 auto; min-width: 0; font-family: var(--font-display, Outfit, "IBM Plex Sans", sans-serif); font-size: 18px; line-height: 26px; font-weight: 700; color: var(--neutral-900, #1a1a1a); }
.pf-rcard__title:focus { outline: none; }
.pf-rcard__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; margin: 0; color: var(--neutral-700, #5d5c58); }
.pf-rcard__meta > div { display: inline-flex; align-items: center; gap: 6px; }
.pf-rcard__meta dt { color: var(--neutral-700, #5d5c58); }
.pf-rcard__meta dd { margin: 0; font-weight: 600; color: var(--neutral-800, #3a3935); }
.pf-rcard__members { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.pf-rcard__empty { margin: 0; color: var(--neutral-600, #6b6963); }
.pf-rcard--shipped { background: var(--category-done-bg, #eff8ea); }
@container pf-rcard (max-width: 599px) { .pf-rcard__members { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Templates: page layouts drawn as regions ---------- */
.pf-level--template { background: var(--neutral-900, #1a1a1a); color: var(--neutral-0, #fff); }
.pf-rel__lvl--template { background: var(--neutral-900, #1a1a1a); color: var(--neutral-0, #fff); }
.pf-template { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 20px; }
.pf-rframe { display: grid; gap: 6px; padding: 6px; border: var(--border-default, 1px solid #d8d4c8); border-radius: var(--radius-lg, 10px); background: var(--neutral-100, #efeee9); }
.pf-rframe--desk { flex: 1 1 560px; min-width: 0; grid-template-columns: 116px minmax(0, 1fr); }
.pf-rframe--phone { flex: none; width: 220px; grid-template-columns: minmax(0, 1fr); border-radius: 22px; padding: 8px; }
.pf-region { display: flex; flex-direction: column; gap: 2px; min-width: 0; min-height: 40px; padding: 6px 8px; border: 1.5px dashed var(--neutral-400, #c9c5ba); border-radius: var(--radius-sm, 6px); background: var(--neutral-0, #fff); }
.pf-region__name { font-family: var(--font-mono, "JetBrains Mono", ui-monospace, monospace); font-size: 14px; line-height: 20px; font-weight: 700; color: var(--brand-burgundy, #4b0a1f); overflow-wrap: anywhere; }
.pf-region__note { font-size: 14px; line-height: 19px; color: var(--neutral-600, #6b6963); }
.pf-region--nav { background: var(--brand-sand, #f6f3eb); }
.pf-region--float { border-style: solid; border-color: var(--brand-gold, #b69b56); background: var(--brand-gold-tint, #fbf4e6); }
.pf-region--grow { min-height: 150px; }
.pf-template__cap { margin: 0 0 8px; font-size: 14px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--neutral-600, #6b6963); }

/* Recipe tag: a component built only for armando */
.pf-level__recipe { display: inline-flex; align-items: center; height: 16px; margin-left: 8px; padding: 0 6px; border-radius: 3px; background: var(--neutral-0, #fff); color: var(--neutral-900, #1a1a1a); box-shadow: inset 0 0 0 1px var(--neutral-400, #c9c5ba); font-size: 12px; letter-spacing: .06em; }

/* ---------- 0.5: suggested changes ---------- */
/* Button sizes: sm 30px with 14px text (no zoom), lg 44px */
.pf-btn--sm { height: 30px; padding: 0 10px; gap: 6px; font-size: 14px; }
.pf-btn--sm .pf-svg { width: 14px; height: 14px; }
.pf-btn--lg { height: 44px; padding: 0 18px; font-size: 16px; }
.pf-btn--block { width: 100%; justify-content: flex-start; }
.pf-btn--block > span:not(.pf-dotflag) { flex: 1 1 auto; text-align: left; }
/* Board: phase heading folds the phase */
button.pf-board__phase { display: flex; align-items: center; gap: 6px; width: 100%; min-width: 0; margin: 0; padding: 6px 0 0; border: 0; border-top: 3px solid var(--acc); background: transparent; font: inherit; font-size: 14px; line-height: 20px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--acc-fg); text-align: left; cursor: pointer; }
button.pf-board__phase .pf-svg { transition: transform .15s; }
button.pf-board__phase[aria-expanded="false"] .pf-svg { transform: rotate(-90deg); }
button.pf-board__phase:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--brand-gold, #b69b56); border-radius: var(--radius-xs, 4px); }
.pf-board__phase--folded { justify-content: center; }
.pf-bfold--phase { border-top: 3px solid var(--acc); color: var(--neutral-800, #3a3935); }
@media (prefers-reduced-motion: reduce) { button.pf-board__phase .pf-svg { transition: none; } }
/* Menu as a sheet on a phone (MenuButton, ActionsMenu) */
.pf-sheetdemo { display: flex; flex-direction: column; justify-content: flex-end; min-height: 380px; background: color-mix(in srgb, var(--neutral-900, #1a1a1a) 40%, transparent); }
.pf-menu--sheet { position: static; width: auto; min-width: 0; max-width: none; gap: 0; padding: 6px 8px calc(12px + env(safe-area-inset-bottom, 0px)); border: 0; border-radius: var(--radius-2xl, 16px) var(--radius-2xl, 16px) 0 0; box-shadow: var(--elevation-5, 0 15px 50px rgba(0,0,0,.18)); }
.pf-menu__grab { align-self: center; width: 36px; height: 4px; margin: 2px 0 8px; border-radius: var(--radius-pill, 999px); background: var(--neutral-300, #d8d4c8); }
.pf-menu--sheet .pf-opt, .pf-menu--sheet .pf-menu__item { min-height: 48px; }
/* ActionsMenu: group note, person items, unavailable item */
.pf-menu__note { margin: 0; padding: 0 10px 6px; color: var(--neutral-600, #6b6963); }
.pf-menu__item--person { display: flex; align-items: center; gap: 10px; }
.pf-menu__item--person .pf-avatar { flex: none; margin: 0; }
.pf-menu__text { display: flex; flex: 1 1 auto; flex-direction: column; min-width: 0; gap: 1px; }
.pf-menu__item[aria-disabled="true"]:not([aria-busy="true"]) { color: var(--neutral-600, #6b6963); cursor: default; }
.pf-menu__item[aria-disabled="true"]:not([aria-busy="true"]):hover { background: transparent; }
.pf-menu__item[aria-disabled="true"] .pf-avatar { opacity: .6; }
.pf-menu__item .pf-legenda__more { flex: none; margin-left: auto; }
/* Checkbox: count */
.pf-check { align-items: flex-start; }
.pf-check__count { flex: none; margin-left: auto; align-self: center; }
/* RecordHeader: gate row */
.pf-record__gate { margin-top: 12px; }
.pf-record__gate .pf-ref { max-width: 320px; }
@media (max-width: 600px) { .pf-record__gate.pf-dfoot--sunken { display: flex; } .pf-record__gate { display: flex; flex-direction: column; align-items: stretch; } .pf-record__gate .pf-dfoot-buttons { flex-direction: column-reverse; } .pf-record__gate .pf-btn { width: 100%; height: 44px; } }

/* ---------- RequirementIntro: the Armando helper between two requirements in the question cycle ---------- */
.pf-cycle__main { position: relative; }
.pf-reqintro { position: absolute; inset: 0; z-index: var(--z-dropdown, 60); display: flex; align-items: flex-start; justify-content: center; padding: calc(28px + var(--top, 0px)) 16px 28px; background: color-mix(in srgb, var(--neutral-50) 80%, transparent); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); cursor: pointer; animation: pf-ri-in .2s ease-out both; }
.pf-reqintro__canvas { position: relative; width: min(600px, 100%); max-height: none; overflow: hidden; animation: pf-ri-pop .34s cubic-bezier(.2,.9,.3,1.15) both; }
.pf-reqintro__fit { position: relative; height: calc(470px * var(--fit, 1)); }
.pf-reqintro__canvas .pf-dialog__body { padding: 12px 20px 8px; }
.pf-reqintro__stage { position: absolute; left: calc((100% - 560px * var(--fit, 1)) / 2); top: 0; width: 560px; height: 470px; transform: scale(var(--fit, 1)); transform-origin: 0 0; }
.pf-reqintro__helper { position: absolute; left: -20px; top: 110px; width: 290px; height: 380px; max-width: none; }
.pf-reqintro__bubble { position: absolute; left: 6px; top: 40px; width: 196px; margin: 0; padding: 10px 14px 12px; border: var(--border-default); border-radius: var(--radius-xl); background: var(--neutral-0); box-shadow: var(--elevation-1); font-size: 16px; line-height: 22px; font-weight: 600; color: var(--neutral-900); animation: pf-ri-bubble .3s .18s cubic-bezier(.2,.9,.3,1.2) both; }
.pf-reqintro__bubble::after { content: ""; position: absolute; left: 86px; bottom: -8px; width: 14px; height: 14px; background: var(--neutral-0); border-right: var(--border-default); border-bottom: var(--border-default); transform: rotate(45deg); }
.pf-reqintro__bubble .pf-id { display: block; margin-top: 2px; font-size: 20px; line-height: 26px; }
.pf-reqintro__card { position: absolute; left: 236px; bottom: 64px; transform: scale(1.15); transform-origin: 0 100%; animation: pf-ri-card .42s .08s cubic-bezier(.2,.9,.3,1.12) both; }
.pf-reqintro__card .pf-card { width: 264px; box-shadow: var(--elevation-3); pointer-events: none; }
.pf-reqintro__timer { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--brand-gold); transform-origin: 0 50%; animation: pf-ri-timer var(--hold, 2s) linear both; }
.pf-reqintro.is-leaving { animation: pf-ri-out .4s ease-in forwards; }
.pf-reqintro.is-leaving .pf-reqintro__canvas { animation: pf-ri-chrome .25s ease-in forwards; }
.pf-reqintro--fade.is-leaving .pf-reqintro__canvas { animation: pf-ri-fade .3s ease-in forwards; }
.pf-reqintro--static { position: static; padding: 0; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; cursor: default; animation: none; }
.pf-reqintro--static * { animation: none !important; }
.pf-reqintro--static .pf-reqintro__timer { transform: scaleX(.35); }
.pf-reqintro__flyer { position: fixed; z-index: 90; margin: 0; width: 264px; transform-origin: 0 0; pointer-events: none; box-shadow: var(--elevation-3); }
@keyframes pf-ri-in { from { opacity: 0; } }
@keyframes pf-ri-pop { from { opacity: 0; transform: translateY(14px) scale(.97); } }
@keyframes pf-ri-bubble { from { opacity: 0; transform: translateY(8px) scale(.9); } }
@keyframes pf-ri-card { from { opacity: 0; transform: translateY(28px) scale(1.02); } }
@keyframes pf-ri-timer { from { transform: scaleX(1); } to { transform: scaleX(0); } }
@keyframes pf-ri-out { to { opacity: 0; } }
@keyframes pf-ri-chrome { to { background: transparent; border-color: transparent; box-shadow: none; } }
@keyframes pf-ri-fade { to { opacity: 0; transform: scale(.96); } }
@media (prefers-reduced-motion: reduce) { .pf-reqintro, .pf-reqintro * { animation-duration: .15s !important; animation-delay: 0s !important; } .pf-reqintro__timer { display: none; } }

.pf-reqintro--static { width: 100%; display: flex; justify-content: center; }
.pf-reqintro-demo { position: relative; display: grid; grid-template-columns: minmax(200px, 260px) minmax(0, 1fr); gap: 24px; min-height: 640px; padding: 20px; border: var(--border-subtle); border-radius: var(--radius-xl); background: var(--neutral-50); overflow: hidden; }
.pf-reqintro-demo__q { min-height: 200px; border: var(--border-subtle); border-radius: var(--radius-xl); background: var(--neutral-0); padding: 20px; color: var(--neutral-700); }

/* Checkbox: bare (a row's selection control) and mixed ("some of them") */
.pf-check__box { position: relative; }
.pf-check__dash { display: none; position: absolute; left: 50%; top: 50%; width: 10px; height: 2px; margin: -1px 0 0 -5px; border-radius: 1px; background: var(--neutral-0, #fff); }
.pf-check[aria-checked="mixed"] { border-color: var(--brand-gold, #b69b56); background: var(--brand-gold-tint, #fbf4e6); }
.pf-check[aria-checked="mixed"] .pf-check__box { border-color: var(--brand-gold, #b69b56); background: var(--brand-gold, #b69b56); }
.pf-check[aria-checked="mixed"] .pf-check__dash { display: block; }
.pf-check--bare { flex: none; width: auto; gap: 0; padding: 3px; border: 0; border-radius: var(--radius-xs, 4px); background: transparent; align-items: center; }
.pf-check--bare[aria-checked="true"], .pf-check--bare[aria-checked="mixed"] { background: transparent; }
.pf-check--bare .pf-check__box { width: 18px; height: 18px; margin: 0; border-radius: var(--radius-xs, 4px); }
.pf-check:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--brand-gold, #b69b56), var(--focus-ring, 0 0 0 3px rgba(182,155,86,.22)); }
.pf-check--bare + .pf-check__label { font-weight: 600; color: var(--neutral-800, #3a3935); }
@media (max-width: 600px) { .pf-check--bare { padding: 11px; margin: -8px; } }

/* Selectable rows and cards: a leading selection column, and the selected look (brand-gold-tint, as the README's selected rows) */
.pf-rowgrid--req.pf-rowgrid--select { grid-template-columns: 24px 90px minmax(220px, 1fr) 180px 120px 150px 130px 64px 100px; }
.pf-rowgrid--story.pf-rowgrid--select { grid-template-columns: 24px 110px minmax(220px, 1fr) 150px 120px 70px 70px 100px; }
.pf-rowgrid--issue.pf-rowgrid--select { grid-template-columns: 24px 80px minmax(220px, 1fr) 110px 110px 110px 200px 170px 100px; }
.pf-rowgrid--selected { background: var(--brand-gold-tint, #fbf4e6); border-bottom-color: color-mix(in srgb, var(--brand-gold, #b69b56) 35%, var(--neutral-0, #fff)); }
.pf-rowgrid--select .pf-check--bare { justify-self: start; }
.pf-card--select .pf-card__head { padding-left: 40px; }
.pf-card__select { position: absolute; top: 3px; left: 6px; z-index: var(--z-raised, 5); }
.pf-card--selected { border-color: var(--brand-gold, #b69b56); box-shadow: 0 0 0 1px var(--brand-gold, #b69b56), var(--elevation-1, 0 1px 2px rgba(164,140,78,.10)); }
.pf-card--selected .pf-card__body { background: var(--brand-gold-tint, #fbf4e6); }

/* SelectionBar: takes the ViewRibbon's place while one or more records are selected */
.pf-selbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; min-height: 60px; padding: 12px 24px; background: var(--brand-gold-tint, #fbf4e6); border-top: 1px solid color-mix(in srgb, var(--brand-gold, #b69b56) 45%, var(--neutral-0, #fff)); border-bottom: 1px solid color-mix(in srgb, var(--brand-gold, #b69b56) 45%, var(--neutral-0, #fff)); }
.pf-selbar__all { display: inline-flex; align-items: center; gap: 8px; }
.pf-selbar__count { font-weight: 700; color: var(--brand-gold-ink, #6e5a26); white-space: nowrap; }
.pf-selbar__actions { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-left: auto; }
.pf-selbar--phone { gap: 8px; min-height: 64px; padding: 8px 12px calc(8px + env(safe-area-inset-bottom, 0px)); border-bottom: 0; box-shadow: var(--elevation-menu, 0 6px 20px rgba(0,0,0,.20)); }
.pf-selbar--phone .pf-btn { height: 44px; }
.pf-selbar--phone .pf-selbar__actions { margin-left: auto; flex-wrap: nowrap; }
.pf-selbar--docked { position: fixed; left: 0; right: 0; bottom: 72px; z-index: var(--z-dropdown, 60); }

/* RecordHeader on a phone: the actions take their own line and may wrap, so ID, status and buttons always fit */
@media (max-width: 599px) {
  .pf-record { padding: 12px 16px; gap: 10px; }
  .pf-record__title { flex-basis: 100%; }
  .pf-record__actions { flex-wrap: wrap; width: 100%; row-gap: 8px; }
  .pf-record__actions .pf-statusbtn { max-width: 100%; min-height: 40px; }
  .pf-record__actions .pf-btn--icon34 { width: 40px; height: 40px; }
  .pf-record__actions > .pf-btn--icon34:last-child, .pf-record__actions > .pf-menuwrap:last-child { margin-left: auto; }
}

/* Chip: filter chips are a 48px touch target on a phone */
@media (max-width: 600px) { .pf-chip:not(.pf-chip--id):not(.pf-chip--file) { height: 48px; padding: 0 16px; } }

/* QuestionBubble on a narrow screen: the head wraps instead of cutting the time, and IDs never break */
.pf-ref .pf-id { flex: none; white-space: nowrap; }
@media (max-width: 599px) {
  .pf-question__head { flex-wrap: wrap; row-gap: 4px; }
  .pf-question__head .pf-named { max-width: 100%; min-width: 0; overflow: hidden; }
  .pf-question__head .pf-named > span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
}

/* CommentBubble: a person's comment or a helper's remark in a record's Comments tab */
.pf-comment { display: flex; gap: 10px; max-width: 760px; }
.pf-comment > .pf-avatar { margin-top: 2px; }
.pf-comment__main { display: flex; flex-direction: column; gap: 6px; flex: 1 1 auto; min-width: 0; }
.pf-comment__head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; min-width: 0; }
.pf-comment__name { font-weight: 600; color: var(--neutral-900, #1a1a1a); }
.pf-comment__head time { margin-left: auto; color: var(--neutral-600, #6b6963); white-space: nowrap; }
.pf-comment__box { padding: 12px 14px; border: 1px solid var(--neutral-300, #d8d4c8); border-radius: var(--radius-xl, 12px); background: var(--neutral-0, #fff); }
.pf-comment__box p { margin: 0; line-height: 22px; overflow-wrap: anywhere; }
.pf-comment__box p + p { margin-top: 8px; }
.pf-comment--remark .pf-comment__box { background: var(--brand-sand, #f6f3eb); border-color: var(--neutral-200, #e4e1d8); }
.pf-comment--resolved .pf-comment__box { background: var(--neutral-50, #f7f6f4); color: var(--neutral-700, #5d5c58); }
@media (max-width: 599px) { .pf-comment__head time { margin-left: 0; flex-basis: 100%; } }

/* 0.8 — HELP-105: TimelineSlider, StateBadge idle and bench, FormField time, RefLink panel, compact Disclosure, EmptyState empty */
.pf-tl { --pos: 0%; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.pf-tl__track { position: relative; padding-top: 14px; }
.pf-tl__marks { position: absolute; top: 0; left: 9px; right: 9px; height: 12px; margin: 0; padding: 0; list-style: none; pointer-events: none; }
.pf-tl__mark { --acc: var(--neutral-600, #6b6963); position: absolute; top: 0; left: var(--at, 0%); width: 3px; height: 12px; margin-left: -1px; border-radius: 2px; background: var(--acc); }
.pf-tl__mark--done { --acc: var(--state-done, #2e8b47); }
.pf-tl__mark--waiting { --acc: var(--state-waiting, #d97a00); }
.pf-tl__mark--danger { --acc: var(--feedback-danger, #b30000); }
.pf-tl__input { display: block; width: 100%; height: 24px; margin: 0; background: transparent; cursor: pointer; -webkit-appearance: none; appearance: none; }
.pf-tl__input::-webkit-slider-runnable-track { height: 6px; border-radius: var(--radius-pill, 999px); background: linear-gradient(to right, var(--brand-burgundy, #4b0a1f) var(--pos), var(--neutral-200, #e4e1d8) var(--pos)); }
.pf-tl__input::-moz-range-track { height: 6px; border-radius: var(--radius-pill, 999px); background: var(--neutral-200, #e4e1d8); }
.pf-tl__input::-moz-range-progress { height: 6px; border-radius: var(--radius-pill, 999px); background: var(--brand-burgundy, #4b0a1f); }
.pf-tl__input::-webkit-slider-thumb { width: 18px; height: 18px; margin-top: -6px; border: 2px solid var(--brand-burgundy, #4b0a1f); border-radius: var(--radius-pill, 999px); background: var(--neutral-0, #fff); box-shadow: var(--elevation-1, 0 1px 2px rgba(0,0,0,.12)); -webkit-appearance: none; appearance: none; }
.pf-tl__input::-moz-range-thumb { width: 14px; height: 14px; border: 2px solid var(--brand-burgundy, #4b0a1f); border-radius: var(--radius-pill, 999px); background: var(--neutral-0, #fff); }
.pf-tl__input:focus { outline: none; }
.pf-tl__input:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 2px var(--brand-gold, #b69b56), var(--focus-ring, 0 0 0 3px rgba(182,155,86,.22)); }
.pf-tl__input:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 2px var(--brand-gold, #b69b56), var(--focus-ring, 0 0 0 3px rgba(182,155,86,.22)); }
.pf-tl__input:disabled { cursor: default; }
.pf-tl__input:disabled::-webkit-slider-runnable-track { background: var(--neutral-200, #e4e1d8); }
.pf-tl__input:disabled::-webkit-slider-thumb { border-color: var(--neutral-400, #c9c5ba); }
.pf-tl__input:disabled::-moz-range-progress { background: var(--neutral-200, #e4e1d8); }
.pf-tl__input:disabled::-moz-range-thumb { border-color: var(--neutral-400, #c9c5ba); }
.pf-tl__scale { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; line-height: 16px; font-weight: 600; color: var(--neutral-600, #6b6963); font-variant-numeric: tabular-nums; }
.pf-tl__now { color: var(--neutral-900, #1a1a1a); font-weight: 700; }
@media (max-width: 599px) { .pf-tl__input { height: 44px; } .pf-tl__track { padding-top: 4px; } .pf-tl__marks { top: 0; } }

.pf-state--idle .pf-state__dot { background: var(--neutral-0, #fff); box-shadow: inset 0 0 0 1.5px var(--neutral-500, #8c8a83); color: var(--neutral-600, #6b6963); } .pf-state--idle .pf-state__label { color: var(--neutral-600, #6b6963); }
.pf-state--bench .pf-state__dot { background: var(--brand-gold, #b69b56); } .pf-state--bench .pf-state__label { color: var(--brand-gold-ink, #7a5e17); }

input[type="time"].pf-input { padding-right: 8px; font-variant-numeric: tabular-nums; }
.pf-field--time { width: 128px; max-width: 100%; }

button.pf-ref { font: inherit; cursor: pointer; }
.pf-ref--panel { display: inline-flex; align-items: center; gap: 4px; vertical-align: baseline; }
.pf-ref--panel .pf-svg { flex: none; color: currentColor; }
button.pf-ref--panel { font-family: var(--font-mono, "JetBrains Mono", ui-monospace, monospace); font-weight: 700; }
.pf-ref--panel[aria-expanded="true"] { text-decoration-color: currentColor; background: var(--brand-gold-tint, #fbf4e6); border-radius: 3px; }

.pf-disc--compact { border-radius: var(--radius-lg, 10px); }
.pf-disc--compact > summary { gap: 8px; padding: 10px 12px; border-radius: var(--radius-lg, 10px); }
.pf-disc--compact .pf-disc__chev { width: 14px; height: 14px; }
.pf-disc--compact .pf-disc__title { font-family: inherit; font-size: 14px; line-height: 20px; }
.pf-disc--compact .pf-disc__body { gap: 8px; padding: 10px 12px 12px; }

.pf-empty--empty { --acc: var(--neutral-600, #6b6963); }

/* 0.9 — TimelineSlider: named event kinds and the kinds key (HELP-105, today's Fenix Stadium replay) */
.pf-tl__swatch { --acc: var(--neutral-600, #6b6963); flex: none; width: 10px; height: 3px; border-radius: 2px; background: var(--acc); }
.pf-tl__mark--step, .pf-tl__swatch--step { --acc: var(--neutral-600, #6b6963); }
.pf-tl__mark--pass, .pf-tl__swatch--pass { --acc: var(--state-working, #2e7dd1); }
.pf-tl__mark--pick, .pf-tl__swatch--pick { --acc: var(--state-done, #2e8b47); }
.pf-tl__mark--var, .pf-tl__swatch--var { --acc: var(--agent-nina, #9b3fd6); }
.pf-tl__mark--goal, .pf-tl__swatch--goal { --acc: var(--brand-gold, #b69b56); }
.pf-tl__mark--reject, .pf-tl__swatch--reject { --acc: var(--feedback-danger, #b30000); }
.pf-tl__mark--goal { top: -2px; height: 14px; }
.pf-tl__key { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 4px 0 0; padding: 0; list-style: none; font-size: 12px; line-height: 16px; font-weight: 600; color: var(--neutral-700, #5d5c58); }
.pf-tl__key li { display: inline-flex; align-items: center; gap: 6px; }

/* ---------- GuideStep: one step of a click-through guide (highlight + step panel) ---------- */
.pf-guide-hl { outline: 3px solid var(--brand-gold, #b69b56); outline-offset: 3px; box-shadow: var(--focus-ring, 0 0 0 3px rgba(182,155,86,.22)); border-radius: var(--radius-sm, 6px); scroll-margin: 96px; }
.pf-guide { position: absolute; z-index: var(--z-popover, 70); width: 340px; max-width: calc(100vw - 32px); max-height: none; overflow: visible; border-radius: var(--radius-lg, 10px); box-shadow: var(--elevation-4, 0 12px 32px rgba(0,0,0,.22)); }
.pf-guide .pf-dialog__head { gap: 10px; padding: 14px 16px 10px; }
.pf-guide__step { display: block; font-size: 14px; line-height: 20px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--neutral-600, #6b6963); }
.pf-guide .pf-dialog-title { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.pf-guide .pf-dialog__body { gap: 8px; padding: 12px 16px 14px; }
.pf-guide__text { margin: 0; color: var(--neutral-900, #1a1a1a); }
.pf-guide__text:focus { outline: none; }
.pf-guide__missing { margin: 0; color: var(--neutral-600, #6b6963); }
.pf-guide .pf-dfoot { padding: 10px 16px 14px; }
.pf-guide .pf-dfoot-buttons { margin-left: auto; }
.pf-guide__tail { position: absolute; width: 14px; height: 14px; background: var(--neutral-0, #fff); transform: rotate(45deg); }
.pf-guide--right .pf-guide__tail { left: -8px; top: var(--tail, 28px); border-left: var(--border-default, 1px solid #d8d4c8); border-bottom: var(--border-default, 1px solid #d8d4c8); }
.pf-guide--left .pf-guide__tail { right: -8px; top: var(--tail, 28px); border-right: var(--border-default, 1px solid #d8d4c8); border-top: var(--border-default, 1px solid #d8d4c8); }
.pf-guide--below .pf-guide__tail { top: -8px; left: var(--tail, 28px); border-left: var(--border-default, 1px solid #d8d4c8); border-top: var(--border-default, 1px solid #d8d4c8); }
.pf-guide--above .pf-guide__tail { bottom: -8px; left: var(--tail, 28px); border-right: var(--border-default, 1px solid #d8d4c8); border-bottom: var(--border-default, 1px solid #d8d4c8); }
.pf-guide--static { position: relative; z-index: 0; }
/* Sheet under 600px: above the MobileTabBar, Back and Next share the width at 48px */
.pf-guide--sheet { position: absolute; left: 0; right: 0; bottom: var(--tabbar, 64px); width: auto; max-width: none; border-width: 1px 0 0; border-radius: var(--radius-2xl, 16px) var(--radius-2xl, 16px) 0 0; }
.pf-guide--sheet .pf-guide__tail { display: none; }
.pf-guide--sheet .pf-dialog__grab { display: block; align-self: center; flex: none; width: 36px; height: 4px; margin-top: 8px; border-radius: var(--radius-pill, 999px); background: var(--neutral-300, #d8d4c8); }
.pf-guide--sheet .pf-dfoot { padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px)); }
.pf-guide--sheet .pf-dfoot-buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; width: 100%; margin-left: 0; }
.pf-guide--sheet .pf-dfoot-buttons > .pf-btn { width: 100%; height: 48px; }
.pf-guide--sheet .pf-dfoot-buttons > .pf-btn:only-child { grid-column: 1 / -1; }
.pf-guide-demo { position: relative; min-height: 560px; padding: 20px; border: var(--border-subtle, 1px solid #e4e1d8); border-radius: var(--radius-xl, 12px); background: var(--neutral-50, #f7f6f4); }
.pf-guide-phone { position: relative; width: 360px; height: 560px; overflow: hidden; border: var(--border-default, 1px solid #d8d4c8); border-radius: 28px; background: var(--neutral-50, #f7f6f4); }
.pf-guide-phone__tabbar { position: absolute; left: 0; right: 0; bottom: 0; height: 64px; display: grid; place-items: center; border-top: var(--border-subtle, 1px solid #e4e1d8); background: var(--neutral-0, #fff); color: var(--neutral-600, #6b6963); font-weight: 600; }
/* ReleaseCard: the guide entry in the meta line */
.pf-rcard__guide { margin-left: auto; }
@media (max-width: 600px) { .pf-rcard__guide { margin-left: 0; } .pf-rcard__guide .pf-btn--sm { height: 36px; padding: 0 12px; } }

/* ---------- CommandBlock: commands to run in order, each copyable exactly as stored ---------- */
.pf-cmd { min-width: 0; border: var(--border-default, 1px solid #d8d4c8); border-radius: var(--radius-md, 8px); background: var(--neutral-50, #f7f6f4); overflow: hidden; }
.pf-cmd__list { margin: 0; padding: 0; list-style: none; }
.pf-cmd__row { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 4px 4px 4px 12px; }
.pf-cmd__row + .pf-cmd__row { border-top: var(--border-subtle, 1px solid #e4e1d8); }
.pf-cmd__n { font-family: var(--font-mono, "JetBrains Mono", ui-monospace, monospace); font-size: 14px; line-height: 20px; font-weight: 500; color: var(--neutral-600, #6b6963); font-variant-numeric: tabular-nums; }
.pf-cmd__code { display: block; min-width: 0; overflow-x: auto; padding: 4px 0; font-family: var(--font-mono, "JetBrains Mono", ui-monospace, monospace); font-size: 14px; line-height: 20px; font-weight: 500; color: var(--neutral-900, #1a1a1a); white-space: pre; tab-size: 2; }
.pf-cmd__code:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--brand-gold, #b69b56); border-radius: var(--radius-xs, 4px); }
.pf-cmd__row .pf-btn[data-copied] { color: var(--feedback-success, #2f6b18); }
.pf-cmd__foot { display: flex; justify-content: flex-end; padding: 4px; border-top: var(--border-subtle, 1px solid #e4e1d8); }
/* ---------- QuestionBubble: step variant (a step of the work after a merge) ---------- */
.pf-question--step .pf-question__box { container: pf-stepq / inline-size; }
.pf-stepq__mark { display: block; font-size: 14px; line-height: 20px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--brand-gold-outline-ink, #6e5a26); }
.pf-stepq__title { margin: 2px 0 0; font-size: 15px; line-height: 22px; font-weight: 700; color: var(--neutral-900, #1a1a1a); }
.pf-stepq__guide { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 10px 16px; margin: 0; }
.pf-stepq__guide dt { font-size: 14px; line-height: 20px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--neutral-600, #6b6963); }
.pf-stepq__guide dd { min-width: 0; margin: 0; color: var(--neutral-900, #1a1a1a); white-space: pre-line; }
.pf-stepq__guide dd ul { margin: 0; padding-left: 18px; white-space: normal; }
.pf-stepq__guide dd .pf-cmd { white-space: normal; }
@container pf-stepq (max-width: 599px) { .pf-stepq__guide { grid-template-columns: minmax(0, 1fr); gap: 2px; } .pf-stepq__guide dd + dt { margin-top: 10px; } }
.pf-stepq__answer { display: flex; flex-direction: column; gap: 6px; }

/* 0.10 — HELP-120: HelpButton, ArmandoAnswer, HelpPanel (Armando's help) */
.pf-face { position: relative; flex: none; display: inline-block; width: 32px; height: 32px; border-radius: var(--radius-pill, 999px); overflow: hidden; background: var(--card-header, #efe8da); box-shadow: 0 0 0 1px var(--neutral-200, #e4e1d8); }
.pf-face img { position: absolute; left: -17%; top: -10%; width: 150%; max-width: none; height: auto; pointer-events: none; }
.pf-face--sm { width: 28px; height: 28px; }
.pf-help { position: relative; display: inline-flex; width: 56px; height: 56px; padding: 0; border: 2px solid var(--neutral-0, #fff); border-radius: var(--radius-pill, 999px); background: var(--card-header, #efe8da); overflow: hidden; cursor: pointer; box-shadow: 0 0 0 1px var(--neutral-300, #d8d4c8), var(--elevation-4, 0 12px 32px rgba(0,0,0,.22)); }
.pf-help img { position: absolute; left: -17%; top: -10%; width: 150%; max-width: none; height: auto; pointer-events: none; }
.pf-help:hover { box-shadow: 0 0 0 2px var(--brand-gold, #b69b56), var(--elevation-4, 0 12px 32px rgba(0,0,0,.22)); }
.pf-help:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--neutral-0, #fff), 0 0 0 4px var(--brand-gold, #b69b56), var(--elevation-4, 0 12px 32px rgba(0,0,0,.22)); }
.pf-help[aria-expanded="true"] { box-shadow: 0 0 0 3px var(--brand-gold, #b69b56), var(--elevation-4, 0 12px 32px rgba(0,0,0,.22)); }
.pf-help--docked { position: fixed; right: 24px; bottom: 24px; z-index: var(--z-popover, 70); }
@media (max-width: 599px) {
  .pf-help { width: 48px; height: 48px; }
  .pf-help--docked { right: 16px; bottom: calc(72px + env(safe-area-inset-bottom, 0px)); }
  .pf-help--docked.pf-help--over-fab { bottom: calc(140px + env(safe-area-inset-bottom, 0px)); }
}

.pf-aans { display: flex; align-items: flex-start; gap: 10px; width: 100%; }
.pf-aans__col { display: flex; flex-direction: column; gap: 4px; min-width: 0; max-width: 560px; }
.pf-aans__meta { color: var(--neutral-600, #6b6963); } .pf-aans__meta strong { color: var(--neutral-900, #1a1a1a); }
.pf-aans__body { padding: 10px 14px; border: 1px solid var(--neutral-200, #e4e1d8); border-radius: 4px 14px 14px 14px; background: var(--neutral-0, #fff); line-height: 21px; overflow-wrap: anywhere; }
.pf-aans__body > * { margin: 0; }
.pf-aans__body > * + * { margin-top: 8px; }
.pf-aans__body ul, .pf-aans__body ol { padding-left: 20px; }
.pf-aans__body code { padding: 0 4px; border-radius: var(--radius-xs, 4px); background: var(--neutral-100, #efeee9); font-family: var(--font-mono, "JetBrains Mono", ui-monospace, monospace); font-size: 13px; }
.pf-aans__body a { color: var(--brand-burgundy, #4b0a1f); text-decoration: underline; text-decoration-color: var(--brand-sand-underline, #d8b9a0); text-underline-offset: 3px; }
.pf-aans__from { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-top: 2px; }
.pf-aans__from-k { font-size: 12px; line-height: 16px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--neutral-600, #6b6963); }
.pf-aans--unknown .pf-aans__body { display: flex; align-items: flex-start; gap: 8px; border-color: transparent; background: var(--neutral-100, #efeee9); color: var(--neutral-800, #3a3935); }
.pf-aans--unknown .pf-aans__body .pf-svg { margin-top: 3px; color: var(--neutral-700, #5d5c58); }
.pf-aans--unknown .pf-aans__body > * + * { margin-top: 0; }
.pf-aans__dots { display: inline-flex; gap: 4px; padding: 4px 0; }
.pf-aans__dots i { width: 6px; height: 6px; border-radius: var(--radius-pill, 999px); background: var(--neutral-500, #8c8a83); animation: pf-aans-dot 1.2s ease-in-out infinite; }
.pf-aans__dots i:nth-child(2) { animation-delay: .2s; } .pf-aans__dots i:nth-child(3) { animation-delay: .4s; }
@keyframes pf-aans-dot { 0%, 60%, 100% { opacity: .35; } 30% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .pf-aans__dots i { animation: none; opacity: .7; } }

.pf-helpp { display: flex; flex-direction: column; width: 400px; max-width: calc(100vw - 32px); height: min(640px, calc(100vh - 120px)); border: var(--border-default, 1px solid #d8d4c8); border-radius: var(--radius-2xl, 16px); background: var(--neutral-0, #fff); box-shadow: var(--elevation-popover, 0 10px 30px rgba(0,0,0,.22)); overflow: hidden; }
.pf-helpp--docked { position: fixed; right: 24px; bottom: 92px; z-index: var(--z-popover, 70); }
.pf-helpp__head { flex: none; display: flex; align-items: center; gap: 10px; padding: 10px 10px 10px 16px; border-bottom: var(--border-subtle, 1px solid #e4e1d8); }
.pf-helpp__title { flex: 1 1 auto; margin: 0; font-family: var(--font-display, Outfit, "IBM Plex Sans", sans-serif); font-size: 18px; line-height: 26px; font-weight: 700; color: var(--neutral-900, #1a1a1a); }
.pf-helpp__body { flex: 1 1 auto; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 14px; padding: 14px 16px 16px; background: var(--neutral-50, #f7f6f4); }
.pf-helpp__intro > * { margin: 0; } .pf-helpp__intro > * + * { margin-top: 8px; }
.pf-helpp__thread { display: flex; flex-direction: column; gap: 14px; }
.pf-helpp__thread .pf-answer__col { max-width: 85%; }
.pf-helpp__guides { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.pf-helpp__guide { display: flex; align-items: center; gap: 8px; padding: 8px 0; border-top: var(--border-hairline, 1px solid #efeee9); }
.pf-helpp__guide-title { flex: 1 1 auto; min-width: 0; font-weight: 600; }
.pf-helpp__foot { flex: none; display: flex; flex-direction: column; gap: 6px; padding: 12px 16px 14px; border-top: var(--border-subtle, 1px solid #e4e1d8); background: var(--neutral-0, #fff); }
.pf-helpp__ask { display: flex; align-items: flex-end; gap: 8px; }
.pf-helpp__ask .pf-field { flex: 1 1 auto; min-width: 0; }
.pf-helpp__ask textarea.pf-input { min-height: 56px; }
.pf-helpp__meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 8px; color: var(--neutral-600, #6b6963); }
@media (max-width: 599px) {
  .pf-helpp--docked { position: fixed; inset: 0; width: auto; max-width: none; height: auto; border: 0; border-radius: 0; box-shadow: none; z-index: var(--z-popover, 70); }
  .pf-helpp__head .pf-btn--icon { width: 44px; height: 44px; }
  .pf-helpp__foot { padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px)); }
}

/* DesignRequestRow (HELP-116): one design system request in the list of /playfocus/design-requests. */
.pf-dsreq{container-type:inline-size;display:flex;flex-direction:column;gap:var(--space-3);padding:var(--space-4);background:var(--neutral-0);border:var(--border-default);border-radius:var(--radius-lg);box-shadow:var(--elevation-1)}
.pf-dsreq__head{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2) var(--space-3);min-width:0}
.pf-dsreq__head .pf-ref{min-width:0;max-width:100%}
.pf-dsreq__by{margin-left:auto;display:inline-flex;align-items:center;gap:var(--space-2);color:var(--neutral-700)}
.pf-dsreq__meta{display:grid;grid-template-columns:200px minmax(0,1fr);gap:var(--space-1-5) var(--space-4);margin:0}
.pf-dsreq__meta dt{font-size:14px;line-height:20px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--brand-gold-ink)}
.pf-dsreq__meta dd{margin:0;color:var(--neutral-900);overflow-wrap:anywhere}
.pf-dsreq__answer{padding-top:var(--space-3);border-top:var(--border-hairline)}
.pf-dsreq-list{display:flex;flex-direction:column;gap:var(--space-3)}
@container (max-width:560px){.pf-dsreq__meta{grid-template-columns:minmax(0,1fr);gap:0}.pf-dsreq__meta dd{margin-bottom:var(--space-2)}.pf-dsreq__by{margin-left:0}}

/* NotificationBell (HELP-125): the first row of ArmandoNav, a button that opens the NotificationList. */
.pf-rail__item.pf-nbell { width: calc(100% - 10px); border: 0; background: none; font: inherit; color: var(--neutral-0, #fff); cursor: pointer; text-align: left; }
.pf-rail__item.pf-nbell:hover, .pf-rail__item.pf-nbell[aria-expanded="true"] { background: var(--on-rail-hover, rgba(255,255,255,.14)); }
.pf-rail--collapsed .pf-rail__item.pf-nbell { width: auto; }
.pf-nbell-row { display: flex; align-items: center; gap: 14px; width: 100%; height: 52px; padding: 0 14px; border: var(--border-default); border-radius: var(--radius-lg, 10px); background: var(--neutral-0, #fff); font: inherit; font-weight: 600; color: var(--neutral-900, #1a1a1a); text-align: left; cursor: pointer; }
.pf-nbell-row__ic { position: relative; display: inline-flex; }
.pf-nbell-row__ic .pf-badge { position: absolute; top: -8px; right: -10px; }
/* NotificationList (HELP-125): the bell's non-modal popover, a bottom sheet on a phone. */
.pf-nlist { width: 380px; max-height: min(560px, calc(100vh - 32px)); display: flex; flex-direction: column; background: var(--neutral-0, #fff); border: var(--border-default); border-radius: var(--radius-2xl, 16px); box-shadow: var(--elevation-popover); overflow: hidden; color: var(--neutral-900, #1a1a1a); }
.pf-nlist--sheet { width: auto; max-height: 80vh; border-radius: var(--radius-2xl, 16px) var(--radius-2xl, 16px) 0 0; padding-bottom: env(safe-area-inset-bottom, 0px); }
.pf-nlist__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 12px 8px 16px; border-bottom: var(--border-hairline); }
.pf-nlist__title { margin: 0; font-size: 16px; line-height: 22px; font-weight: 700; }
.pf-nlist__all { height: 32px; }
.pf-nlist__body { overflow: auto; min-height: 0; }
.pf-nlist__body > .pf-empty, .pf-nlist__body > .pf-alert { margin: 8px 12px 12px; }
.pf-nlist__alert { padding: 0 12px 8px; }
.pf-nlist__list { margin: 0; padding: 4px 0; list-style: none; }
.pf-nlist__item { position: relative; display: flex; gap: 12px; align-items: flex-start; padding: 10px 32px 10px 16px; color: inherit; text-decoration: none; }
.pf-nlist__item:hover { background: var(--brand-sand, #f6f3eb); }
.pf-nlist__item:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--brand-gold, #b69b56); }
.pf-nlist__item--unread { background: var(--brand-gold-tint, #fbf4e6); }
.pf-nlist__item--unread .pf-nlist__line { font-weight: 600; }
.pf-nlist__ic { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: var(--radius-pill, 999px); background: var(--neutral-100, #efeee9); color: var(--neutral-700, #5d5c58); }
.pf-nlist__ic--question { background: var(--category-prepare-bg); color: var(--category-prepare-fg); }
.pf-nlist__ic--answer { background: var(--feedback-success-bg); color: var(--feedback-success); }
.pf-nlist__ic--issue { background: var(--record-issue-header); color: var(--record-issue-ink); }
.pf-nlist__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pf-nlist__line { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pf-nlist__when { font-size: 13px; line-height: 18px; color: var(--neutral-600, #6b6963); }
.pf-nlist__dot { position: absolute; right: 14px; top: 16px; width: 8px; height: 8px; border-radius: var(--radius-pill, 999px); background: var(--brand-gold, #b69b56); }
.pf-nlist__foot { display: flex; justify-content: center; padding: 6px; border-top: var(--border-hairline); }
/* HelpPanel dialog (HELP-120): Dialog's modal with Armando big in a left column; replaces the docked box. */
.pf-helpp--dialog { display: grid; grid-template-columns: 240px minmax(0, 1fr); width: max(720px, 60vw); max-width: calc(100vw - 32px); height: min(640px, calc(100vh - 120px)); padding: 0; overflow: hidden; border-radius: var(--radius-2xl, 16px); box-shadow: var(--elevation-5); }
.pf-helpp__art { background: var(--card-header); border-right: var(--border-subtle); display: flex; align-items: flex-end; justify-content: center; padding: var(--space-6, 24px) var(--space-4, 16px) 0; }
.pf-helpp__art img { width: 200px; height: auto; }
.pf-helpp__main { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.pf-helpp__main > .pf-dialog__body { flex: 1 1 auto; overflow: auto; background: var(--neutral-50); display: flex; flex-direction: column; gap: var(--space-3, 12px); }
.pf-helpp__article { display: flex; flex-direction: column; gap: var(--space-2, 8px); }
.pf-helpp__article-title { margin: 0; font-family: var(--font-display); font-size: 18px; line-height: 26px; font-weight: 700; }
.pf-helpp__article-by { color: var(--neutral-600, #6b6963); }
.pf-helpp--dialog .pf-helpp__face { display: none; }
@media (max-width: 599px) { .pf-helpp--dialog { grid-template-columns: minmax(0, 1fr); width: 100vw; max-width: none; height: 100vh; border-radius: 0; box-shadow: none; } .pf-helpp--dialog .pf-helpp__art { display: none; } .pf-helpp--dialog .pf-helpp__face { display: inline-flex; } }
.pf-helpp--sheet { grid-template-columns: minmax(0, 1fr); width: auto; max-width: none; border-radius: 0; box-shadow: none; } .pf-helpp--sheet .pf-helpp__art { display: none; } .pf-helpp--sheet .pf-helpp__face { display: inline-flex; }
/* HelperKit (HELP-31): the Armando helper in a helper's kit, coloured from --k (an --agent-* token). */
.pf-kit { --k-top: color-mix(in srgb, var(--k) 62%, var(--neutral-0, #fff)); --k-side: color-mix(in srgb, var(--k) 62%, #000); --k-belly: color-mix(in srgb, var(--k) 88%, var(--neutral-0, #fff)); --k-btop: color-mix(in srgb, var(--k) 55%, var(--neutral-0, #fff)); --k-bside: color-mix(in srgb, var(--k) 70%, #000); --k-collar: color-mix(in srgb, var(--k) 45%, #000); --sh: #f3f3f0; --sh-top: #f6f6f4; --sh-side: #aaaaa8; --hem: #f3f3f0; --num: var(--neutral-0, #fff); display: block; height: auto; }
.pf-kit--ref, .pf-kit--linesman, .pf-kit--fourth, .pf-kit--coach { --sh: #23262d; --sh-top: #3a3d44; --sh-side: #131418; --hem: #3a3d44; }
.pf-kit--ref, .pf-kit--suit, .pf-kit--manager { --crest-op: 0; }
.pf-kit--suit { --k: #2b2b33; --sh: #2b2b33; --sh-top: #3a3a44; --sh-side: #18181d; --hem: #2b2b33; }
.pf-kits { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.pf-kits__item { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px; background: var(--neutral-0, #fff); border: var(--border-subtle); border-radius: var(--radius-lg, 10px); }
.pf-kits__name { font-weight: 700; } .pf-kits__role { color: var(--neutral-700, #5d5c58); text-align: center; }
/* ResourceRow (HELP-130, HELP-131): a help article or a guide as one clickable row; the action shows on hover and focus. */
.pf-rrows { list-style: none; margin: 0; padding: 0; }
.pf-rrows > li + li { border-top: var(--border-hairline, 1px solid #efeee9); }
.pf-rrows--boxed { padding: 4px 16px; background: var(--neutral-0, #fff); border: var(--border-default, 1px solid #d8d4c8); border-radius: var(--radius-lg, 10px); }
.pf-rrow { display: flex; align-items: center; gap: 8px; margin: 0 -8px; padding: 8px; border-radius: var(--radius-md, 8px); color: inherit; text-decoration: none; cursor: pointer; }
.pf-rrow__title { flex: 1 1 auto; min-width: 0; font-weight: 600; overflow-wrap: anywhere; }
.pf-rrow__act { display: none; flex: none; align-items: center; gap: 4px; font-weight: 600; color: var(--brand-burgundy, #4b0a1f); }
.pf-rrow:hover, .pf-rrow:focus-visible, .pf-rrow--hover { background: var(--thread-hover, #f5f9fd); }
.pf-rrow:hover .pf-rrow__act, .pf-rrow:focus-visible .pf-rrow__act, .pf-rrow--hover .pf-rrow__act { display: inline-flex; }
.pf-rrow:focus-visible { outline: 2px solid var(--brand-gold, #b69b56); outline-offset: 1px; }
/* ReleaseNote (HELP-131): one release's note on the About page's Release Notes. */
.pf-rnote { display: flex; flex-direction: column; gap: 12px; padding: 16px; background: var(--neutral-0, #fff); border: var(--border-default, 1px solid #d8d4c8); border-radius: var(--radius-lg, 10px); }
.pf-rnote__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 12px; }
.pf-rnote__title { margin: 0; font-family: var(--font-display, Outfit, "IBM Plex Sans", sans-serif); font-size: 18px; line-height: 26px; font-weight: 700; color: var(--neutral-900, #1a1a1a); }
.pf-rnote__date { color: var(--neutral-600, #6b6963); }
.pf-rnote__fig { display: flex; flex-direction: column; gap: 6px; max-width: 560px; margin: 0; }
.pf-rnote__fig img { display: block; width: 100%; height: auto; border-radius: var(--radius-md, 8px); }
.pf-rnote__fig figcaption { color: var(--neutral-600, #6b6963); }
.pf-rnote__sec { padding-top: 8px; border-top: var(--border-hairline, 1px solid #efeee9); }
.pf-rnote__k { margin: 0 0 4px; font-size: 14px; line-height: 20px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--neutral-600, #6b6963); }
.pf-rnote__list { margin: 0; padding-left: 20px; }
.pf-rnote__list li { overflow-wrap: anywhere; }
/* HelpPanel start view (HELP-130): the action Disclosures' primary Button. */
.pf-helpp__go { margin-top: 12px; }
/* HelpButton 'Ask me' (HELP-130): FormFieldLegenda's tip look, left of the button, on hover and keyboard focus. */
.pf-helpw { position: relative; display: inline-flex; }
.pf-help__tip { position: absolute; top: 50%; right: calc(100% + 10px); z-index: var(--z-tooltip, 80); transform: translateY(-50%); width: max-content; padding: 6px 10px; border-radius: var(--radius-sm, 6px); background: var(--neutral-900, #1a1a1a); color: var(--neutral-0, #fff); font-size: 14px; font-weight: 500; line-height: 20px; box-shadow: var(--elevation-2, 0 2px 8px rgba(0,0,0,.25)); visibility: hidden; opacity: 0; transition: opacity .12s ease; pointer-events: none; }
.pf-help:hover + .pf-help__tip, .pf-help:focus-visible + .pf-help__tip, .pf-help__tip--show { visibility: visible; opacity: 1; }
@media (hover: none) { .pf-help__tip { display: none; } }
@media (prefers-reduced-motion: reduce) { .pf-help__tip { transition: none; } }
/* HelpPanel 'New since your last visit' (HELP-132): release blocks and fixes in the start view's first Disclosure. */
.pf-helpp__rel { display: flex; flex-direction: column; gap: 4px; }
.pf-helpp__rel + .pf-helpp__rel { margin-top: 12px; padding-top: 12px; border-top: var(--border-hairline, 1px solid #efeee9); }
.pf-helpp__rel-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 12px; }
.pf-helpp__rel-name { margin: 0; font-size: 14px; line-height: 20px; font-weight: 700; color: var(--neutral-900, #1a1a1a); }
.pf-helpp__rel-date { color: var(--neutral-600, #6b6963); }
.pf-helpp__fixes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.pf-helpp__fix { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 12px; }
.pf-helpp__fix > span { flex: 1 1 220px; min-width: 0; overflow-wrap: anywhere; }
.pf-helpp__fix .pf-rrows { flex-basis: 100%; }
/* Toast with an action (HELP-132): one sm Button under the text; such a toast stays until dismissed. */
.pf-toast__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
@media (max-width: 600px) { .pf-toasts--over-help { bottom: 148px; } }