/* Portfolio presentation components.
   Load after design-system.css. Source screens, artwork and prototypes keep
   their own visual language; these rules describe the case study around them. */
:root {
  --pf-flow-decision: #eaf0f5;
  --pf-flow-line: #85918a;
  --pf-flow-accent: #4b6b84;
}
body.pf-system[data-ds-tone='dark'] {
  --pf-flow-decision: #202c36;
  --pf-flow-line: #89959e;
  --pf-flow-accent: #aac5d9;
}
body.pf-system { overflow-wrap: break-word; }
body.pf-system *, body.pf-system *::before, body.pf-system *::after { box-sizing: border-box; }
body.pf-system .pf-project-hero { min-height: 560px !important; }
body.pf-system .pf-project-copy { padding-top: 24px !important; text-align: left !important; }
body.pf-system .pf-project-copy .hero-actions { justify-content: flex-start !important; }
body.pf-system .pf-project-copy :is(h1,.pf-label,.pf-hero-description) { text-align: left !important; margin-left: 0 !important; }
body.pf-system .pf-project-media { align-self: center; }
body.pf-system .pf-project-copy .scope { margin-bottom: 24px !important; }
body.pf-system .pf-project-hero .hero-link { width: fit-content; }
/* The old universal color reset must not make icon spans disappear on CTAs. */
body.pf-system :is(.hero-link,.primary-link,.experience-button,.button.dark,.hero-actions>a:first-child) * { color: inherit !important; }

body.pf-system .pf-section-number {
  display: block; order: -1; font: 400 var(--pf-type-label)/1.5 var(--pf-mono) !important;
  color: var(--pf-muted) !important; margin-bottom: 16px;
}
body.pf-system .pf-section-intro .pf-section-number { order: -1; }
body.pf-system .pf-chapter-intro { margin-bottom: var(--pf-heading-gap) !important; }
body.pf-system .pf-module-description {
  display: block; font: 400 var(--pf-type-detail)/1.65 var(--pf-font) !important;
  color: var(--pf-muted) !important; max-width: 64ch;
  margin: 8px 0 0 !important;
}
body.pf-system .pf-module-description.pf-copy-description {
  flex-basis: 100%; margin: 8px 0 24px !important;
}
body.pf-system .pf-copy-description.pf-copy-after-heading { margin-top: -12px !important; }
body.pf-system .comparison-heading:has(> p) { display: block; }
body.pf-system .comparison-heading > p {
  font: 400 var(--pf-type-detail)/1.65 var(--pf-font) !important; color: var(--pf-muted) !important;
  max-width: 64ch !important; margin: 12px 0 0 !important;
}
body.pf-system .pf-option-rationale {
  font: 400 16px/1.6 var(--pf-font) !important; color: var(--pf-muted) !important;
  margin: 16px 0 0 !important; padding-top: 16px; border-top: 0;
}
body.pf-system :is(.micro-heading,.example-heading,.comparison-heading,.ux-flow-heading) {
  display: flex; flex-wrap: wrap; align-items: baseline;
  justify-content: space-between; gap: 8px 24px !important;
  margin-bottom: 24px !important;
}
body.pf-system :is(.example-heading,.ux-flow-heading):has(.pf-module-description) { display: block; }
body.pf-system .pf-artifact-heading { margin: 0; }
body.pf-system .pf-artifact-heading .pf-description { font-size: 16px !important; }
body.pf-system .pf-status {
  flex: 0 0 auto; font: 400 var(--pf-type-label)/1.5 var(--pf-mono) !important;
  color: var(--pf-muted) !important; white-space: normal;
}
body.pf-system .ux-artifact > figcaption:has(.pf-artifact-heading) {
  display: flex; justify-content: space-between; align-items: start;
  flex-wrap: wrap; gap: 16px 24px !important; margin: 0 0 32px !important;
}
body.pf-system .ux-artifact > figcaption > .pf-artifact-heading { flex: 1 1 340px; }
body.pf-system .reason-label { margin-bottom: 24px !important; }
body.pf-system .reason-label:has(+.pf-module-description) { margin-bottom: 0 !important; }
body.pf-system .reason-label + .pf-module-description { margin-bottom: 24px !important; }
body.pf-system .pf-system-content { margin: 0 !important; padding-top: 0 !important; border-top: 0 !important; }
body.pf-system #design-system .pf-system-content { padding: 24px !important; border: 1px solid var(--pf-border) !important; }
body.pf-system #design-system .icon-tile { margin-top: 32px; padding: 24px; }
body.pf-system #design-system .icon-grid { display: grid; grid-template-columns: repeat(6,minmax(0,1fr)); padding-top: 24px; }
body.pf-system #design-system .icon-grid > div { text-align: center; }
body.pf-system #design-system .icon-grid img { display: block; width: 45px; height: 45px; object-fit: contain; margin: 0 auto 12px; }
body.pf-system #design-system .font-specimen > span { white-space: nowrap; width: auto; flex: 0 0 auto; }

/* Flow grammar: rounded terminals, rectangular actions, diamond decisions,
   directed connectors. Dashed paths retain their meaning in each source. */
body.pf-system .pf-artifact { min-width: 0; }
body.pf-system .pf-flow-legend {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px;
  margin: 24px 0 20px;
}
body.pf-system .pf-flow-legend > span {
  display: inline-flex; align-items: center; gap: 8px;
  font: 400 15px/1.5 var(--pf-font) !important; color: var(--pf-muted) !important;
}
body.pf-system .pf-flow-legend i { display: block; width: 18px; height: 12px; border: 1px solid var(--pf-flow-line); background: var(--pf-flow-action); flex-shrink: 0; }
body.pf-system .pf-flow-legend .pf-key-terminal { border-radius: 12px; background: var(--pf-flow-terminal); }
body.pf-system .pf-flow-legend .pf-key-action { border-radius: 2px; }
body.pf-system .pf-flow-legend .pf-key-decision { width: 11px; height: 11px; margin-inline: 3px; transform: rotate(45deg); background: var(--pf-flow-decision); border-color: var(--pf-decision-line); }
body.pf-system .pf-flow-legend .pf-key-proposed { height: 0; border: 0; border-top: 1px dashed var(--pf-flow-line); }
body.pf-system .pf-flow-legend a { margin-left: auto; font: 400 15px/1.5 var(--pf-font) !important; min-height: 32px; display: inline-flex; align-items: center; }
body.pf-system :is(.diagram-scroll,.flow-artifact .map-scroll,.flow-canvas,.user-flow) {
  border: 1px solid var(--pf-border) !important; border-radius: 8px !important;
  background: var(--pf-canvas) !important; background-image: none !important;
}
body.pf-system .diagram-scroll { overflow-x: auto; }
body.pf-system #inventory-user-flow .flow-toolbar { padding: 0 0 20px; }
body.pf-system #inventory-user-flow .flow-diagram { min-width: 1000px; }
body.pf-system [data-pf-diagram] text {
  font-family: var(--pf-font) !important; fill: var(--pf-ink) !important;
  letter-spacing: 0 !important;
}
body.pf-system .pf-flow-svg { display: block; width: 100%; height: auto; }
body.pf-system .pf-flow-svg text { font-size: 18px; text-anchor: middle; }
body.pf-system .pf-flow-svg text.sub { font-size: 16px; }
body.pf-system .pf-flow-svg :is(.pf-svg-edge,.pf-svg-node,.pf-svg-terminal,.pf-svg-decision) { stroke-width: 1.5; }
body.pf-system .pf-diagram-mobile { display: none; }
body.pf-system [data-pf-diagram] :is(.sub,.edge-label text) { fill: var(--pf-muted) !important; }
body.pf-system [data-pf-diagram] .pf-svg-canvas { fill: var(--pf-flow-canvas) !important; }
body.pf-system [data-pf-diagram] :is(.node rect,.pf-svg-node) { fill: var(--pf-flow-action) !important; stroke: var(--pf-flow-line) !important; }
body.pf-system [data-pf-diagram] :is(.terminal rect,.pf-svg-terminal) { fill: var(--pf-flow-terminal) !important; stroke: var(--pf-terminal-line) !important; }
body.pf-system [data-pf-diagram] :is(.decision>path,.pf-svg-decision) { fill: var(--pf-flow-decision) !important; stroke: var(--pf-decision-line) !important; }
body.pf-system [data-pf-diagram] :is(.edges path,.pf-svg-edge) { fill: none !important; stroke: var(--pf-flow-line) !important; }
body.pf-system [data-pf-diagram] marker path { fill: var(--pf-flow-line) !important; }
body.pf-system [data-pf-diagram] .edges path.highlight { stroke: var(--pf-flow-accent) !important; }
body.pf-system [data-pf-diagram] .node.highlight :is(rect,path) { stroke: var(--pf-flow-accent) !important; stroke-width: 2px; }
body.pf-system .flow-reason { display: block; margin-top: var(--pf-module) !important; }
body.pf-system .flow-reason > div:first-child { margin-bottom: 24px; }
body.pf-system .flow-reason .user-flow { width: 100%; }
body.pf-system .flow-canvas { padding: 32px !important; }
body.pf-system :is(.flow-terminal,.flow-process,.compact-flow-origin,.compact-task li) {
  border: 1px solid var(--pf-flow-line) !important; background: var(--pf-flow-action) !important;
  font: 400 16px/1.5 var(--pf-font) !important; border-radius: 4px !important;
}
body.pf-system :is(.flow-terminal,.compact-flow-origin) { border-radius: 32px !important; background: var(--pf-flow-terminal) !important; }
body.pf-system :is(.decision-shape,.flow-diamond) { background: var(--pf-flow-decision) !important; border-color: var(--pf-decision-line) !important; }
body.pf-system :is(.flow-connector,.branch-path::before,.tree-leaf::before,.tree-end::before) { color: var(--pf-flow-line) !important; }
body.pf-system .flow-result-notes { margin-top: 24px; padding-top: 24px; border-top: 0; }
body.pf-system .flow-result-notes p { font-size: 16px !important; color: var(--pf-muted) !important; }
body.pf-system .map-source { margin-top: 24px !important; }
body.pf-system.pf-unified [data-pf-artifact] .flow-terminal { border-radius: 32px !important; background: var(--pf-flow-terminal) !important; }
body.pf-system.pf-unified [data-pf-artifact] .decision-shape { background: var(--pf-flow-decision) !important; border-color: var(--pf-decision-line) !important; }
body.pf-system.pf-unified [data-pf-artifact] :is(.flow-canvas,.diagram-scroll,.map-scroll) { background: var(--pf-flow-canvas) !important; }
body.pf-system.pf-unified [data-pf-artifact] .pf-diagram-frame { border: 1px solid var(--pf-border); border-radius: 8px; overflow: hidden; }

/* Journeys share a numbered milestone rail. Evidence stays inside its step. */
body.pf-system [data-pf-journey] {
  display: grid !important; grid-auto-flow: column; grid-auto-columns: minmax(0,1fr);
  grid-template-columns: none !important; gap: 24px !important;
  padding: 0 !important; margin: 0 !important; background: transparent !important;
  border: 0 !important; counter-reset: journey;
}
body.pf-system [data-pf-journey] > i { display: none; }
body.pf-system [data-pf-journey] > :is(li,article) {
  position: relative; counter-increment: journey; padding: 24px 0 0 !important;
  border: 0 !important; border-top: 0 !important;
  border-radius: 0 !important; background: transparent !important;
  display: block; min-width: 0;
}
body.pf-system [data-pf-journey] > :is(li,article)::before {
  content: counter(journey,decimal-leading-zero); position: static;
  display: block; width: auto; height: auto; margin: 0 0 16px;
  padding: 0; border: 0; border-radius: 0; background: none;
  font: 400 var(--pf-type-label)/1.5 var(--pf-mono); color: var(--pf-muted);
}
body.pf-system [data-pf-journey] > :is(li,article)::after { display: none; }
body.pf-system [data-pf-journey] > li > b { font: 500 var(--pf-type-card)/1.3 var(--pf-font) !important; margin: 0 0 12px !important; }
body.pf-system [data-pf-journey] > li > span { font: 400 16px/1.6 var(--pf-font) !important; color: var(--pf-muted) !important; text-align: left; }
body.pf-system [data-pf-journey] .milestone-number { display: none; }
body.pf-system [data-pf-journey] .journey-milestone { min-height: 0; margin-bottom: 24px; padding: 0; }
body.pf-system [data-pf-journey] .journey-pair { margin-top: 16px; border: 1px solid var(--pf-border); }
body.pf-system.pf-unified .pf-journey-artifact [data-pf-journey] { background: transparent !important; }
body.pf-system .pf-journey-artifact > .fine { margin: 24px 0 0 !important; }
body.pf-system .journey-strip [data-ds-type='caption']:first-child { font: 400 var(--pf-type-label)/1.5 var(--pf-mono) !important; }
body.pf-system .journey-strip article > b { display: block; min-height: 0; margin: 12px 0 24px; font: 500 18px/1.5 var(--pf-font) !important; }
body.pf-system .journey-strip :is(.friction,.response) { display: block; border-radius: 0 !important; padding: 12px 0 !important; background: transparent !important; border-top: 0; }
body.pf-system .journey-strip .friction::before { content: 'Friction'; }
body.pf-system .journey-strip .response::before { content: 'Response'; }
body.pf-system .journey-strip :is(.friction,.response)::before { display: block; margin-bottom: 4px; font: 400 var(--pf-type-label)/1.5 var(--pf-mono); color: var(--pf-muted); }

/* Site structures and blueprints share hierarchy and color roles. */
body.pf-system [data-pf-sitemap] :is(.tree-home,.tree-root) { background: var(--pf-soft) !important; color: var(--pf-ink) !important; border: 1px solid var(--pf-border) !important; border-radius: 8px !important; padding: 16px 24px !important; }
body.pf-system [data-pf-sitemap] .tree-root { --pf-ink: #252b28; --pf-soft: #eef0ed; }
body.pf-system.pf-unified [data-pf-sitemap] :is(.tree-home,.tree-root) { background: var(--pf-flow-terminal) !important; }
body.pf-system.pf-unified [data-pf-sitemap] :is(div,li,ul,b)::before,
body.pf-system.pf-unified [data-pf-sitemap] :is(div,li,ul,b)::after,
body.pf-system.pf-unified [data-pf-sitemap] :is(div,li,ul,b) { border-color: var(--pf-border) !important; }
body.pf-system.pf-unified [data-pf-sitemap] .page-tree > li > b { font: 500 18px/1.5 var(--pf-font) !important; padding: 14px 16px; background: var(--pf-surface) !important; }
body.pf-system.pf-unified [data-pf-sitemap] .destination-root > span { background: var(--pf-soft) !important; border: 1px solid var(--pf-border); padding: 16px 24px; }
body.pf-system [data-pf-sitemap] :is(.tree-branches h3,.tree-leaf,.tree-end) { font: 400 16px/1.5 var(--pf-font) !important; background: var(--pf-surface) !important; border-color: var(--pf-border) !important; border-radius: 4px !important; }
body.pf-system [data-pf-blueprint] { border-color: var(--pf-border) !important; background: var(--pf-surface) !important; }

/* Project adapters only handle composition, never change source screen colors. */
body.pf-system[data-portfolio='wecare'] #research > .micro-heading { margin-top: var(--pf-module) !important; }
body.pf-system[data-portfolio='wecare'] #research > .fine { margin-top: 24px !important; }
body.pf-system[data-portfolio='wecare'] .premise { padding-block: 24px; margin-bottom: 48px; }
body.pf-system[data-portfolio='gexplore'] #guidance > figure { margin: 0; }
body.pf-system[data-portfolio='servicedesk'] .takeaway { display: block; }

@media (max-width: 1000px) {
  body.pf-system .pf-project-hero { gap: 32px !important; }
  body.pf-system [data-pf-journey] { grid-auto-flow: row; grid-template-columns: repeat(2,minmax(0,1fr)) !important; }
  body.pf-system [data-pf-journey] > :last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (max-width: 700px) {
  /* Responsive foundation values live in tokens.css. */
  body.pf-system .pf-project-hero { min-height: 0 !important; }
  body.pf-system .pf-project-copy { padding-top: 0 !important; }
  body.pf-system .pf-artifact-heading { flex-basis: 100% !important; }
  body.pf-system .pf-flow-legend { gap: 12px 16px; }
  body.pf-system .pf-flow-legend a { width: 100%; margin-left: 0; }
  body.pf-system .flow-canvas { padding: 20px !important; }
  body.pf-system #design-system .pf-system-content { padding: 20px !important; }
  body.pf-system #design-system .icon-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
  body.pf-system .pf-diagram-desktop { display: none; }
  body.pf-system .pf-diagram-mobile { display: block; max-width: 430px; margin-inline: auto; }
  body.pf-system .pf-diagram-mobile text { font-size: 21px; }
  body.pf-system .pf-diagram-mobile text.sub { font-size: 20px; }
  body.pf-system [data-pf-journey] { grid-template-columns: 1fr !important; }
  body.pf-system [data-pf-journey] > :last-child:nth-child(odd) { grid-column: auto; }
}
@media (max-width: 380px) {
  body.pf-system .pf-diagram-mobile text { font-size: 25px; }
  body.pf-system .pf-diagram-mobile text.sub { font-size: 23px; }
  body.pf-system #design-system .type-study { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  html:has(body.pf-system) { scroll-behavior: auto !important; }
}

/* Project identity is shared with the homepage through project-palettes.css.
   Diagram roles use different strengths of the same hue, plus labels and shapes. */
body.pf-system {
  --pf-project-accent: var(--project-text, var(--project-color));
  --pf-accent-ink: var(--project-on-color);
  --pf-secondary: var(--project-text, var(--project-color));
  --pf-canvas: #fdfdfc;
  --pf-band-primary: color-mix(in srgb, var(--project-tint) 48%, #fff);
  --pf-band-secondary: var(--project-soft);
  --pf-border: #d9dce0;
  --pf-flow-canvas: #f8f9fa;
  --pf-flow-dot: #aab1ba40;
  --pf-flow-action: #ffffff;
  --pf-flow-terminal: var(--project-tint);
  --pf-flow-decision: var(--project-soft);
  --pf-flow-line: #87909c;
  --pf-flow-accent: var(--project-color);
  --pf-terminal-line: var(--project-diagram-line, var(--project-color));
  --pf-decision-line: var(--project-text, var(--project-color));
  --pf-research-says: var(--project-soft);
  --pf-research-thinks: var(--project-tint);
  --pf-research-does: var(--project-tint-strong);
  --pf-research-feels: color-mix(in srgb, var(--project-tint) 55%, var(--project-tint-strong));
  --pf-friction: var(--project-soft);
  --pf-response: var(--project-tint-strong);
}
body.pf-system[data-ds-tone='dark'] {
  --pf-project-accent: var(--project-bright);
  --pf-secondary: var(--project-pale);
  --pf-canvas: #0b0c10;
  --pf-border: #292d36;
  --pf-band-primary: #0e1014;
  --pf-band-secondary: #101218;
  --pf-flow-canvas: #111015;
  --pf-flow-dot: #ffffff12;
  --pf-flow-action: #1b1821;
  --pf-flow-terminal: #152121;
  --pf-flow-decision: #291720;
  --pf-flow-line: #827b8e;
  --pf-terminal-line: #76e6e1;
  --pf-decision-line: #ff5287;
  --pf-research-says: var(--project-dark);
  --pf-research-thinks: color-mix(in srgb, var(--project-dark) 65%, var(--project-dark-strong));
  --pf-research-does: var(--project-dark-strong);
  --pf-research-feels: color-mix(in srgb, var(--project-dark) 35%, var(--project-dark-strong));
  --pf-friction: var(--project-dark);
  --pf-response: var(--project-dark-strong);
}

/* Tinted chapters create visible breaks, while panels remain a reading surface. */
body.pf-system.pf-unified .pf-chapter[data-pf-band='primary'] { background: var(--pf-band-primary) !important; }
body.pf-system.pf-unified .pf-chapter[data-pf-band='secondary'] { background: var(--pf-band-secondary) !important; }
body.pf-system.pf-unified .pf-section-number {
  display: inline-flex; align-items: center; gap: 12px;
  width: fit-content; color: var(--pf-project-accent) !important;
}
body.pf-system.pf-unified .pf-section-number::before { content: none; }
/* Pawsitive's peach is too light for small text, so its numbers use the darker warm tone. */
body.pf-system.pf-unified[data-portfolio='pawsitive'] .pf-section-number { color: #8f5233 !important; }
body.pf-system.pf-unified .pf-project-copy .pf-label { color: var(--pf-project-accent) !important; }
body.pf-system.pf-unified .pf-project-media { background: var(--pf-band-primary) !important; border-color: var(--pf-border) !important; }
/* Neutral connectors let terminal, action and decision colors express their roles. */
body.pf-system.pf-unified [data-pf-artifact] .flow-process { background: var(--pf-flow-action) !important; border-color: var(--pf-flow-line) !important; }
body.pf-system.pf-unified [data-pf-artifact] .flow-terminal { border-color: var(--pf-terminal-line) !important; }
body.pf-system.pf-unified [data-pf-diagram] .node.recovery rect { fill: var(--pf-flow-action) !important; stroke: var(--pf-decision-line) !important; }
body.pf-system.pf-unified [data-pf-diagram] .node.highlight :is(rect,path) { stroke: var(--pf-project-accent) !important; stroke-width: 3px !important; }
body.pf-system.pf-unified [data-pf-diagram] .edges path.highlight { stroke: var(--pf-project-accent) !important; stroke-width: 3px !important; }
body.pf-system.pf-unified :is(.compact-flow-origin,.compact-task li) { background: var(--pf-flow-action) !important; border-color: var(--pf-flow-line) !important; }
body.pf-system.pf-unified .compact-flow-origin { background: var(--pf-flow-terminal) !important; }

/* Empathy map quadrants share four research tints in every project. */
body.pf-system.pf-unified [data-pf-journey] > :is(li,article) { border-top: 0 !important; }
body.pf-system.pf-unified [data-pf-journey] > :is(li,article)::before {
  display: inline-flex !important; align-items: center; justify-content: center;
  width: 36px !important; height: 32px !important; border-radius: 4px !important;
  background: var(--pf-flow-action) !important; color: var(--pf-ink) !important;
}
body.pf-system.pf-unified [data-pf-journey] :is(.friction,.journey-friction) { background: var(--pf-friction) !important; padding: 12px !important; border: 0 !important; }
body.pf-system.pf-unified [data-pf-journey] :is(.response,.journey-response) { background: var(--pf-response) !important; padding: 12px !important; border: 0 !important; }
body.pf-system.pf-unified [data-pf-journey] .journey-pair { overflow: hidden; border-radius: 4px !important; }

/* Root, branch, and backstage colors clarify structural diagrams. */
body.pf-system.pf-unified [data-pf-sitemap] :is(.tree-home,.tree-root,.destination-root>span) { background: var(--pf-flow-action) !important; border-color: var(--pf-flow-line) !important; }
body.pf-system.pf-unified [data-pf-sitemap] :is(.page-tree>li>b,.tree-branches h3,.destination-card) { background: var(--pf-band-secondary) !important; border-color: var(--pf-border) !important; }
body.pf-system.pf-unified [data-pf-sitemap] :is(.tree-leaf,.tree-end) { background: var(--pf-flow-canvas) !important; }
body.pf-system.pf-unified [data-pf-blueprint] .service-user { background: var(--pf-research-does) !important; }
body.pf-system.pf-unified [data-pf-blueprint] .service-node { background: var(--pf-flow-action) !important; }
body.pf-system.pf-unified [data-pf-blueprint] .service-backstage { background: var(--pf-research-thinks) !important; }
body.pf-system.pf-unified .service-lanes[data-pf-blueprint] > div:nth-child(1) { background: var(--pf-research-does) !important; }
body.pf-system.pf-unified .service-lanes[data-pf-blueprint] > div:nth-child(2) { background: var(--pf-flow-action) !important; }
body.pf-system.pf-unified .service-lanes[data-pf-blueprint] > div:nth-child(3) { background: var(--pf-research-thinks) !important; }

/* Small supporting text needs more contrast on saturated diagram tints. */
body.pf-system[data-ds-tone='light'] :is([data-pf-artifact],.pf-empathy-grid,[data-pf-journey],[data-pf-blueprint]) { --pf-muted: #535e58; }

/* Control geometry, states, and focus are owned by button-hierarchy.css. */

/* A small, repeatable cue distinguishes operable previews from static evidence. */
body.pf-system.pf-unified .pf-interaction-hint {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px !important;
  margin: 16px 0 !important; font: 400 16px/1.5 var(--pf-font) !important;
  color: var(--pf-muted) !important;
}
body.pf-system.pf-unified .pf-interaction-hint > span:first-child {
  display: inline-flex; align-items: center; gap: 6px; padding: 0;
  border: 0; color: var(--pf-control-ink) !important; background: transparent !important;
  font: 500 15px/1.5 var(--pf-font) !important;
}
body.pf-system.pf-unified .pf-interaction-hint > span:first-child::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
body.pf-system.pf-unified .pf-interaction-hint:has(+ .source-hud-tabs) { margin-inline: 20px !important; }
body.pf-system.pf-unified[data-portfolio] :is(.zoom,.image-button) {
  position: relative; cursor: zoom-in; outline-offset: 4px;
  box-shadow: 0 0 0 1px var(--pf-control-border) !important;
}
body.pf-system.pf-unified[data-portfolio] :is(.zoom,.image-button)::after {
  content: 'Enlarge ↗'; position: absolute; right: 10px; bottom: 10px; z-index: 2;
  padding: 6px 10px; border-radius: 4px; background: var(--pf-interactive);
  color: var(--pf-interactive-ink); font: 500 15px/1.5 var(--pf-font); pointer-events: none;
}
body.pf-system.pf-unified[data-portfolio] :is(.zoom,.image-button):hover::after { background: var(--pf-interactive-hover); }
body.pf-system.pf-unified[data-portfolio] .image-button .image-expand { display: none !important; }
body.pf-system.pf-unified[data-portfolio] input[type='range']:not(:where([data-design-evidence],[data-design-evidence] *)) { accent-color: var(--pf-interactive); cursor: ew-resize; }
body.pf-system.pf-unified[data-portfolio] .motion-controls input[type='range'] { appearance: auto !important; min-height: 44px; background: transparent !important; }
body.pf-system.pf-unified[data-portfolio] .compare-divider { background: var(--pf-interactive) !important; }
body.pf-system.pf-unified[data-portfolio] .compare-divider > span { background: var(--pf-interactive) !important; color: var(--pf-interactive-ink) !important; border: 2px solid white !important; }
@media (prefers-reduced-motion: reduce) {
  body.pf-system.pf-unified[data-portfolio] :is(button,[role='button']) { transition: none !important; }
}

/* Artifact presentation follows the original Feral study: quiet frames,
   inset preview tabs, technical measurement bands, and dotted flow boards. */
body.pf-system {
  --pf-technical: var(--project-text, var(--project-color));
  --pf-technical-surface: var(--project-soft);
  --pf-technical-muted: var(--pf-muted);
  --pf-technical-handle: #ffffff;
}
body.pf-system[data-portfolio='feral'] {
  --pf-technical: #76e6e1;
  --pf-technical-surface: #151e29;
  --pf-technical-muted: #9db3ca;
  --pf-technical-handle: #07333b;
}
/* Femme Fatale keeps the game's warm ink and brass instead of Feral's blue-black. */
body.pf-system[data-portfolio='femmefatale'][data-ds-tone='dark'] {
  --pf-technical: var(--project-bright);
  --pf-technical-surface: #1d1e18;
  --pf-technical-muted: #b7b7ab;
  --pf-technical-handle: #20170d;
  --pf-canvas: #11120f;
  --pf-surface: #191a16;
  --pf-soft: #25261f;
  --pf-ink: #eee9de;
  --pf-muted: #b7b7ab;
  --pf-border: #383a2e;
  --pf-band-primary: #171813;
  --pf-band-secondary: #1b1c17;
  --pf-control-surface: #151612;
  --pf-control-ink: #eee9de;
  --pf-control-selected: #2e2618;
  --pf-control-border: #4a4a3a;
  --pf-control-hover: #25261f;
}
body.pf-system.pf-unified[data-portfolio] :is(.pf-panel,.ui-stage,.feature-video,.clip-frame,.image-wrap,.wire-comparison,.accurate-wire-card,.screen-card,.shot,.story-shot) {
  border: 1px solid var(--pf-border) !important;
  border-radius: var(--pf-radius) !important;
  box-shadow: none !important;
}
body.pf-system.pf-unified[data-portfolio] :is(.ui-tabs,.source-hud-tabs) button {
  padding: 0 !important;
  overflow: hidden;
  text-align: left;
}
body.pf-system.pf-unified[data-portfolio] [data-pf-artifact='flow'] {
  padding: 0 !important; border: 0 !important; background: transparent !important;
  box-shadow: none !important;
}
body.pf-system.pf-unified[data-portfolio] .ui-tabs { gap: 10px !important; }
body.pf-system.pf-unified[data-portfolio] .ui-tabs button img {
  display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover;
}
body.pf-system.pf-unified[data-portfolio] .screen-tab-label {
  padding: 10px 8px !important; font: 500 15px/1.5 var(--pf-font) !important;
  white-space: nowrap;
}
body.pf-system.pf-unified[data-portfolio] .source-hud-tabs button { padding: 12px !important; }
body.pf-system.pf-unified[data-portfolio] .source-hud-tabs button > span { display: block; margin: 0 0 6px !important; }
body.pf-system.pf-unified[data-portfolio] .source-hud-tabs button strong { margin: 0 !important; }
body.pf-system.pf-unified[data-portfolio] .source-hud-tabs button::after { margin: 12px 0 0; }
body.pf-system.pf-unified[data-portfolio] :is(.screen-arrow,.model-reset,#dialog-close) {
  width: 44px !important; height: 44px !important;
}
body.pf-system.pf-unified[data-portfolio] :is(.diagram-scroll,.flow-artifact .map-scroll,.flow-canvas,.user-flow,.pf-diagram-frame) {
  border: 1px solid var(--pf-border) !important; border-radius: 8px !important;
  background-color: var(--pf-flow-canvas) !important;
  background-image: radial-gradient(var(--pf-flow-dot) .8px, transparent .9px) !important;
  background-size: 18px 18px !important;
}
body.pf-system.pf-unified[data-portfolio] [data-pf-diagram] .pf-svg-canvas { fill: transparent !important; }
body.pf-system.pf-unified[data-portfolio] [data-pf-diagram] .pf-svg-node { rx: 4px; }
body.pf-system.pf-unified[data-portfolio] .pf-key-terminal { border-color: var(--pf-terminal-line); }
body.pf-system.pf-unified[data-portfolio] [data-pf-diagram] .node.highlight :is(rect,path) { stroke-width: 2px !important; }
body.pf-system.pf-unified[data-portfolio] [data-pf-diagram] .edges path.highlight { stroke-width: 2.5px !important; }
body.pf-system.pf-unified[data-portfolio] [data-pf-diagram] #inventory-flow-pink-arrow path { fill: var(--pf-project-accent) !important; }
body.pf-system.pf-unified[data-portfolio] :is(.restored-compare,.comparison-specs,.accurate-wire-card,.wire-comparison) {
  border: 1px solid var(--pf-border) !important;
  background: var(--pf-technical-surface) !important;
}
body.pf-system.pf-unified[data-portfolio] .restored-compare { border-radius: 8px !important; overflow: hidden; }
body.pf-system.pf-unified[data-portfolio] .comparison-specs { border-top: 0 !important; border-radius: 0 0 8px 8px !important; overflow: hidden; }
body.pf-system.pf-unified[data-portfolio] :is(.layout-spec-row,.board-top,.screen-card figcaption,.image-title) {
  background: var(--pf-technical-surface) !important;
  border-color: var(--pf-border) !important;
}
body.pf-system.pf-unified[data-portfolio] .layout-spec-row > div { padding: 20px 24px !important; }
body.pf-system.pf-unified[data-portfolio] .layout-spec-row strong {
  display: block; margin: 8px 0 !important;
  font: 500 clamp(18px,1.7vw,24px)/1.4 var(--pf-mono) !important;
  color: var(--pf-technical) !important;
}
body.pf-system.pf-unified[data-portfolio] .layout-spec-row span {
  font: 400 14px/1.6 var(--pf-mono) !important;
  color: var(--pf-technical-muted) !important;
}
body.pf-system.pf-unified[data-portfolio] .layout-spec-row small {
  font: 400 15px/1.6 var(--pf-font) !important;
  color: var(--pf-technical-muted) !important;
}
body.pf-system.pf-unified[data-portfolio] .compare-divider { background: var(--pf-technical) !important; }
body.pf-system.pf-unified[data-portfolio] .compare-divider > span {
  width: 44px; height: 44px;
  background: var(--pf-technical-handle) !important; color: var(--pf-technical) !important;
  border: 2px solid var(--pf-technical) !important;
  box-shadow: 0 0 20px color-mix(in srgb, var(--pf-technical) 20%, transparent) !important;
}
body.pf-system.pf-unified[data-portfolio] .restored-compare:focus-within .compare-divider > span {
  outline: 3px solid var(--pf-technical); outline-offset: 4px;
}
body.pf-system.pf-unified[data-portfolio] [data-pf-sitemap] :is(.tree-home,.tree-root,.destination-root>span) {
  background: var(--pf-flow-terminal) !important; border-color: var(--pf-terminal-line) !important;
}
body.pf-system.pf-unified[data-portfolio] [data-pf-journey] > :is(li,article) { border-top-width: 0 !important; }
@media (max-width: 700px) {
  body.pf-system.pf-unified[data-portfolio] .layout-spec-row > div { padding: 16px !important; }
}
@media (max-width: 480px) {
  body.pf-system.pf-unified[data-portfolio] .source-hud-tabs { grid-template-columns: 1fr; }
}