/* Evidence layout owner. Imported source UI and illustrations keep their own styles. */
@import url('./flow-system.css');

/* Unboxed modules own separation through margin and gap, never wrapper padding. */
body.pf-system.pf-unified[data-portfolio] [data-pf-layout='module'] {
  padding-block: 0 !important;
}
body.pf-system.pf-unified[data-portfolio] .pf-section-intro + [data-pf-layout='module'] {
  margin-top: 0 !important;
}
body.pf-system.pf-unified[data-portfolio] .design-row[data-pf-layout='module'] {
  gap: var(--pf-grid-gap) !important; align-items: start;
}
body.pf-system.pf-unified[data-portfolio] .design-copy > .pf-module-description {
  margin: var(--pf-space-1) 0 0 !important;
}
body.pf-system.pf-unified[data-portfolio] .design-copy > :is(h3,h4) { margin: 0 !important; }

/* Open media: the image owns clipping; the caption sits on the page canvas.
   Use a surface card only when the entire content has internal padding. */
body.pf-system.pf-unified[data-portfolio] [data-pf-presentation='media'] {
  padding: 0 !important; background: transparent !important; border: 0 !important;
  box-shadow: none !important; overflow: visible !important;
}
body.pf-system.pf-unified[data-portfolio] [data-pf-presentation='media'] > figcaption {
  display: block;
  margin: 0 !important; padding: var(--pf-space-3) 0 0 !important;
  background: transparent !important; border: 0 !important;
}
body.pf-system.pf-unified[data-portfolio] [data-pf-presentation='media'] > figcaption:has(> :is(h3,h4,p)) {
  display: grid; gap: var(--pf-space-1) !important;
}
body.pf-system.pf-unified[data-portfolio] [data-pf-presentation='media'] > figcaption > :is(h3,h4,p) {
  margin: 0 !important; padding: 0 !important;
}

/* Editorial evidence is grouped by spacing, not an enclosing outline.
   Keep control edges, device silhouettes, annotation targets and diagram nodes. */
body.pf-system.pf-unified[data-portfolio] :is(
  .pf-panel,.pf-project-media,.gallery-item,.gallery-frame,.gameplay-player,
  .motion-player,.feature-video,.clip-frame,.image-wrap,.shot,.story-shot,
  .screen-card,.wire-comparison,.accurate-wire-card,.pf-wire-card,
  .restored-compare,.comparison-specs,.pf-diagram-frame,.diagram-scroll,
  .flow-canvas,.user-flow,.ff-state-grid figure,.ff-button-states figure
):not(:where([data-design-evidence],[data-design-evidence] *)) {
  border: 0 !important; box-shadow: none !important;
}
body.pf-system.pf-unified[data-portfolio] :is(.gallery-item,.shot,.story-shot) {
  background: transparent !important;
}
body.pf-system.pf-unified[data-portfolio] :is(.gallery-item,.shot,.story-shot,.ui-shot,.gameplay-card) > figcaption {
  border: 0 !important; background: transparent !important;
  margin: 0 !important; padding: var(--pf-space-3) 0 0 !important;
}

/* Wireframe pairs: a gray low-fidelity wireframe beside the real screen at the same size, as in Pawsitive. */
body.pf-system.pf-unified[data-portfolio] .pf-wire-card { padding: var(--pf-panel-padding) !important; background: var(--pf-band-secondary) !important; }
body.pf-system.pf-unified[data-portfolio] .pf-wire-card[data-pf-surface='open'] {
  padding: 0 !important; background: transparent !important;
}
body.pf-system .pf-wire-card-top { margin: 0 0 20px; padding: 0 0 16px; border-bottom: 0; }
body.pf-system .pf-wire-card-top b { font: 500 var(--pf-type-label)/1.5 var(--pf-mono) !important; letter-spacing: .04em; color: var(--pf-ink) !important; }
body.pf-system .pf-wire-pair { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: var(--pf-grid-gap); align-items: start; }
body.pf-system .pf-wire-pair figure { margin: 0; overflow: hidden; border: 0; border-radius: var(--pf-radius); background: #fff; }
body.pf-system .pf-wire-pair img { display: block; width: 100%; height: auto; }
@media (max-width: 700px) {
  body.pf-system.pf-unified[data-portfolio] .pf-wire-card { padding: var(--pf-panel-padding) !important; }
  body.pf-system .pf-wire-pair { grid-template-columns: minmax(0,1fr); gap: 16px; }
}

/* Related research cards share a top and bottom edge. Flexible content absorbs
   the difference inside the cards, rather than leaving an empty footer. */
body.pf-system .pf-research-pair { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: var(--pf-grid-gap); align-items: stretch; margin: 0; }
body.pf-system :is(.pf-persona,.pf-empathy) { display: flex !important; flex-direction: column; gap: 24px; min-width: 0; margin: 0 !important; }
body.pf-system :is(.pf-persona,.pf-empathy) :is(h3,p,dl,dt,dd,ul,li) { margin: 0 !important; }
body.pf-system .pf-persona-identity { display: flex; align-items: center; gap: 24px; }
/* Persona portraits: abstract faceless head and shoulders on the project tint, clothing in the project color. */
body.pf-system .pf-persona-portrait { flex: none; width: 96px; height: 120px; }
body.pf-system .pf-persona-portrait .pf-portrait-bg { fill: var(--project-tint); }
body.pf-system .pf-persona-portrait .pf-portrait-halo { fill: var(--project-tint-strong); }
body.pf-system .pf-persona-portrait .pf-portrait-cloth { fill: var(--pf-project-accent); }
body.pf-system .pf-persona-portrait .pf-portrait-cloth-dark { fill: var(--project-dark-strong); }
body.pf-system .pf-persona-portrait .pf-portrait-coat { fill: #fbfcfd; }
body.pf-system .pf-persona-portrait .pf-portrait-fold { fill: none; stroke: var(--project-tint-strong); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
body.pf-system .pf-persona-portrait .pf-portrait-rib { fill: none; stroke: var(--project-dark-strong); stroke-width: 2.4; stroke-linecap: round; }
body.pf-system .pf-persona-portrait .pf-portrait-string { fill: none; stroke: #fff; stroke-width: 1.6; stroke-linecap: round; }
body.pf-system .pf-persona-name { font-weight: 500 !important; color: var(--pf-ink) !important; }
body.pf-system .pf-persona .pf-persona-meta { margin-top: 4px !important; }
body.pf-system .pf-persona-tags { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 !important; list-style: none; }
body.pf-system .pf-persona-tags li {
  padding: 4px 12px !important; border-radius: 8px; background: var(--project-tint);
  color: var(--pf-ink) !important;
}
body.pf-system .pf-persona-facts > div { padding: 0 !important; border-top: 0; }
body.pf-system .pf-persona-facts { display: flex; flex-direction: column; gap: var(--pf-space-3); flex: 1; }
body.pf-system .pf-persona-facts > div { flex: 1; }
body.pf-system .pf-persona-facts > div + div { margin-top: 0 !important; }
body.pf-system .pf-persona .pf-persona-facts dd { margin-top: 4px !important; color: var(--pf-ink) !important; }
body.pf-system .pf-empathy-grid {
  --pf-empathy-ink: #34313d; --pf-empathy-label: #514150;
  display: grid; grid-template-columns: minmax(0,1fr); gap: 8px;
  /* Four tinted rows share the slack so the map matches the persona instead of leaving a ragged bottom. */
  flex: 1; grid-auto-rows: minmax(0,1fr);
}
body.pf-system[data-ds-tone='dark'] .pf-empathy-grid { --pf-empathy-ink: var(--pf-ink); --pf-empathy-label: var(--pf-muted); }
/* Each row keeps its label in one fixed column (the widest, Thinks, is 74 px) so statements start on one line. */
body.pf-system .pf-empathy-grid > div {
  display: grid; grid-template-columns: 96px minmax(0,1fr); align-items: center; column-gap: var(--pf-space-3);
  min-width: 0; min-height: 0; padding: var(--pf-space-2) 20px; border-radius: 8px;
}
body.pf-system .pf-empathy-grid > div:nth-child(1) { background: var(--pf-research-says); }
body.pf-system .pf-empathy-grid > div:nth-child(2) { background: var(--pf-research-thinks); }
body.pf-system .pf-empathy-grid > div:nth-child(3) { background: var(--pf-research-does); }
body.pf-system .pf-empathy-grid > div:nth-child(4) { background: var(--pf-research-feels); }
body.pf-system .pf-empathy-grid dt { display: flex; align-items: center; gap: 8px; color: var(--pf-empathy-label) !important; }
body.pf-system .pf-empathy-grid dt svg { flex: none; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
body.pf-system .pf-empathy .pf-empathy-grid dd { color: var(--pf-empathy-ink) !important; }
body.pf-system .pf-research-photo { display: grid !important; grid-template-columns: minmax(0,2fr) minmax(0,1fr); gap: 24px; align-items: center; margin-inline: 0; }
body.pf-system .pf-research-photo img { display: block; width: 100%; height: auto; }
body.pf-system .pf-research-photo figcaption { display: grid; gap: 8px; }
body.pf-system .pf-research-photo figcaption p { margin: 0 !important; }

/* Annotated screens: a thin outline and a small letter tag mark each area without covering the interface.
   Hovering an area or its key spotlights that area and dims the rest of the screen. */
body.pf-system .pf-annotated { --pf-annotation: var(--project-dark-strong, #2b405b); }
body.pf-system .pf-annotated .image-wrap { position: relative; overflow: hidden; }
body.pf-system .pf-hotspot {
  position: absolute; left: var(--x); top: var(--y); width: var(--w); height: var(--h); z-index: 1;
  border: 1.5px solid color-mix(in srgb,var(--pf-annotation) 80%,transparent); border-radius: 6px;
  box-shadow: 0 0 0 2px rgba(255,255,255,.7), inset 0 0 0 1px rgba(255,255,255,.55);
  transition: box-shadow .2s ease, opacity .2s ease, border-color .2s ease;
}
body.pf-system :is(.pf-hotspot > b,.pf-hotspot-key b,.pf-annotated .design-pin) {
  display: inline-grid !important; place-items: center; flex: none; width: 22px !important; height: 22px !important;
  margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 6px !important;
  background: var(--pf-annotation) !important; color: #fff !important; font: 500 12px/1 var(--pf-mono) !important;
}
body.pf-system .pf-hotspot > b { position: absolute; left: 0; top: 0; transform: translate(-45%,-45%); box-shadow: 0 0 0 2px #fff; }
body.pf-system .pf-hotspot[data-tag='below'] > b { top: 100%; transform: translate(4px,6px); }
body.pf-system .pf-hotspot[data-tag='right'] > b { left: 100%; top: 50%; transform: translate(6px,-50%); }
body.pf-system .pf-hotspot[data-tag='top-right'] > b { left: auto; right: 0; transform: translate(45%,-45%); }
body.pf-system .pf-hotspot[data-fit='tight'] { box-shadow: none; }
/* The screen keeps its frame; the caption below reads as a plain subtitle. */
body.pf-system.pf-unified[data-portfolio] .story-shot.pf-annotated { padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; overflow: visible !important; }
body.pf-system .story-shot.pf-annotated .image-wrap { border: 0 !important; border-radius: var(--pf-radius) !important; }
body.pf-system .pf-annotated figcaption {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin: 0 !important;
  padding: 16px 0 0 !important; border: 0 !important; background: transparent !important;
}
body.pf-system .pf-shot-name { margin: 0 !important; font: 500 16px/1.5 var(--pf-font) !important; color: var(--pf-ink) !important; }
body.pf-system .pf-hotspot-key { display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 0 !important; padding: 0 !important; list-style: none; }
body.pf-system .pf-hotspot-key li { display: flex; align-items: center; gap: 8px; margin: 0 !important; font: 400 16px/1.5 var(--pf-font) !important; color: var(--pf-ink) !important; }
body.pf-system .pf-shot-note { margin: 0 0 0 auto !important; font: 400 15px/1.5 var(--pf-font) !important; color: var(--pf-muted) !important; }
@media (hover: hover) {
  body.pf-system .pf-hotspot-key li { cursor: default; }
  body.pf-system .pf-annotated:has(.pf-hotspot-key li:hover,.pf-hotspot:hover) .pf-hotspot { opacity: 0; }
  body.pf-system .pf-annotated:is(:has(.pf-hotspot-key li[data-key='a']:hover,.pf-hotspot[data-key='a']:hover)) .pf-hotspot[data-key='a'],
  body.pf-system .pf-annotated:is(:has(.pf-hotspot-key li[data-key='b']:hover,.pf-hotspot[data-key='b']:hover)) .pf-hotspot[data-key='b'],
  body.pf-system .pf-annotated:is(:has(.pf-hotspot-key li[data-key='c']:hover,.pf-hotspot[data-key='c']:hover)) .pf-hotspot[data-key='c'],
  body.pf-system .pf-annotated:is(:has(.pf-hotspot-key li[data-key='d']:hover,.pf-hotspot[data-key='d']:hover)) .pf-hotspot[data-key='d'],
  body.pf-system .pf-annotated:is(:has(.pf-hotspot-key li[data-key='e']:hover,.pf-hotspot[data-key='e']:hover)) .pf-hotspot[data-key='e'] {
    z-index: 2; opacity: 1; border-color: var(--pf-annotation); box-shadow: 0 0 0 2px #fff, 0 0 0 100vmax rgba(16,24,36,.3);
  }
  body.pf-system .pf-annotated:has(.pf-hotspot[data-key='a']:hover) .pf-hotspot-key li[data-key='a'],
  body.pf-system .pf-annotated:has(.pf-hotspot[data-key='b']:hover) .pf-hotspot-key li[data-key='b'],
  body.pf-system .pf-annotated:has(.pf-hotspot[data-key='c']:hover) .pf-hotspot-key li[data-key='c'],
  body.pf-system .pf-annotated:has(.pf-hotspot[data-key='d']:hover) .pf-hotspot-key li[data-key='d'],
  body.pf-system .pf-annotated:has(.pf-hotspot[data-key='e']:hover) .pf-hotspot-key li[data-key='e'],
  body.pf-system .pf-hotspot-key li:hover { text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--pf-annotation); }
}
@media (prefers-reduced-motion: reduce) { body.pf-system .pf-hotspot { transition: none; } }
@media (max-width: 700px) {
  body.pf-system .pf-annotated figcaption { padding-top: 12px !important; gap: 8px 16px; }
  body.pf-system .pf-shot-note { margin-left: 0 !important; flex-basis: 100%; }
  body.pf-system :is(.pf-hotspot > b,.pf-hotspot-key b,.pf-annotated .design-pin) { width: 18px !important; height: 18px !important; border-radius: 5px !important; font-size: 10px !important; }
  body.pf-system .pf-hotspot { border-width: 1px; border-radius: 4px; }
}


/* Browser window: final website screens (GExplore, Service Desk) sit in one shared window: a light bar with
   three dots and an address field that is blank or names the screen, never an invented URL. Annotated
   screens keep their lettered hotspots on the screenshot inside it. A wireframe paired with a windowed
   screen gets the same bar drawn low-fi, so both stay the same size. */
body.pf-system.pf-unified[data-portfolio] .story-shot.pf-annotated:has(> .pf-browser) { overflow: visible !important; }
body.pf-system.pf-unified[data-portfolio] .pf-browser {
  border-radius: var(--pf-radius) !important; overflow: hidden !important; background: #fff !important;
  padding: 0 !important; border: 0 !important;
  box-shadow: 0 0 0 1px rgba(20,30,40,.1), 0 24px 48px -28px rgba(20,40,60,.35) !important;
}
body.pf-system.pf-unified[data-portfolio] .pf-browser > :is(.image-wrap,img,video) { display: block; width: 100%; border-radius: 0 !important; box-shadow: none !important; }
body.pf-system.pf-unified[data-portfolio] .pf-browser-bar {
  display: flex !important; align-items: center; gap: 8px; height: 32px; margin: 0 !important; padding: 0 12px;
  background: #eef1f3; border-bottom: 1px solid rgba(20,30,40,.08);
}
body.pf-system.pf-unified[data-portfolio] .pf-browser-bar i { flex: none; width: 9px; height: 9px; border-radius: 50%; background: #cdd3d8; }
body.pf-system.pf-unified[data-portfolio] .pf-browser-bar span {
  flex: 0 1 52%; height: 20px; margin: 0 auto; border-radius: 6px; background: #fff; box-shadow: inset 0 0 0 1px rgba(20,30,40,.08);
  font: 500 11px/20px var(--pf-mono); letter-spacing: .02em; color: #5b6168; text-align: center;
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
body.pf-system.pf-unified[data-portfolio] .pf-browser.is-lofi { box-shadow: 0 0 0 1px #999 !important; }
body.pf-system.pf-unified[data-portfolio] .pf-browser-bar.is-lofi { background: #f0f0f0; border-bottom-color: #999; }
body.pf-system.pf-unified[data-portfolio] .pf-browser-bar.is-lofi i { background: none; box-shadow: inset 0 0 0 1px #999; }
body.pf-system.pf-unified[data-portfolio] .pf-browser-bar.is-lofi span { box-shadow: inset 0 0 0 1px #999; }

/* Consistent paired framing, including the Pawsitive adapter. */
body.pf-system.pf-unified[data-portfolio] .pf-wire-card :is(.board-top,.pf-wire-card-top) {
  display: flex; justify-content: space-between; gap: 16px;
  border: 0 !important; padding: 0 !important; margin: 0 0 var(--pf-space-4) !important;
  font: 500 var(--pf-type-label)/1.5 var(--pf-mono) !important;
}
body.pf-system.pf-unified[data-portfolio] .pf-wire-pair > figure > :is(img,svg) {
  display: block; width: 100%; height: auto; object-fit: contain;
}
body.pf-system.pf-unified[data-portfolio] .pf-wire-pair figcaption {
  padding: 12px 16px !important; margin: 0 !important;
  font: 400 var(--pf-type-caption)/1.6 var(--pf-font) !important;
  color: var(--pf-muted) !important; background: var(--pf-surface) !important;
}
body.pf-system.pf-unified[data-portfolio] .pf-caption,
body.pf-system.pf-unified[data-portfolio] [data-ds-type='caption'] {
  font-size: var(--pf-type-caption) !important; line-height: 1.6 !important;
}
body.pf-system.pf-unified[data-portfolio] .pf-hotspot-key button {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 4px 0 !important; border: 0 !important; background: transparent !important;
  color: var(--pf-ink) !important; box-shadow: none !important;
}
body.pf-system.pf-unified[data-portfolio] .pf-hotspot-key button[aria-pressed='true'] { text-decoration: underline; text-underline-offset: 4px; }
body.pf-system.pf-unified[data-portfolio] .pf-annotated[data-pf-active] .pf-hotspot { opacity: 0; }
body.pf-system.pf-unified[data-portfolio] .pf-annotated[data-pf-active] .pf-hotspot[data-active='true'] {
  opacity: 1; box-shadow: 0 0 0 2px #fff, 0 0 0 9999px rgba(0,0,0,.5);
}
@media(max-width:1000px) {
  body.pf-system .pf-research-pair { grid-template-columns: minmax(0,1fr); align-items: start; }
  body.pf-system :is(.pf-persona-facts,.pf-empathy-grid) { flex: none; }
  body.pf-system .pf-empathy-grid { grid-auto-rows: auto; }
}
@media(max-width:700px) {
  body.pf-system :is(.pf-persona,.pf-empathy) { gap: var(--pf-panel-padding); }
  body.pf-system .pf-persona-identity { gap: var(--pf-space-3); }
  body.pf-system .pf-persona-portrait { width: 72px; height: 90px; }
  /* Too narrow for a label column: each row stacks its label above the statement. */
  body.pf-system .pf-empathy-grid > div { display: block; padding: var(--pf-space-2) var(--pf-space-3); }
  body.pf-system .pf-empathy .pf-empathy-grid dd { margin-top: var(--pf-space-1) !important; }
  body.pf-system .pf-research-photo { grid-template-columns: minmax(0,1fr); gap: var(--pf-space-3); }
}