/* The workspace map page. Builds on base.css (tokens, nav, steps, button) and kit.css (the generic
   Par UI the map lives in: paper, ink outline, hard shadow, Live pill). The map itself is a data
   view, like the app's own: circles, lines and labels in SVG, with the generated faces and icons
   inside the circles. Everything around it is the site's own style. */

.pg-top { padding-top: clamp(40px, 8vh, 88px); }
/* a little padding so the quote's link is at least 24 px tall, without moving the line */
.pg-quote a { padding-block: 3px; color: inherit; text-decoration: none; }
.pg-quote a:hover, .pg-quote a:focus-visible { text-decoration: underline; text-underline-offset: 4px; }
.pg-top h1 { margin-top: clamp(18px, 2.4vw, 30px); max-width: 15ch; }
.pg-answer { margin-top: 20px; max-width: 50ch; font-size: clamp(18px, 1.6vw, 21px); line-height: 1.5; color: var(--text-muted); }

/* ── The app window with the map ───────────────────────────── */
.pg-map { margin-top: clamp(32px, 4.4vw, 56px); scroll-margin-top: 16px; }
.pg-app-title { margin: 0; font: 400 26px/1.1 var(--pil-display); letter-spacing: -0.01em; }
.pg-app-title em { font-style: italic; font-weight: 700; }
.pg-stage { display: grid; grid-template-columns: minmax(0, 1fr) clamp(300px, 28vw, 360px); height: clamp(560px, 70vh, 680px); }
.pg-canvas { position: relative; min-width: 0; overflow: hidden; background: var(--pil-paper); }
.pg-canvas svg { display: block; touch-action: manipulation; }
.pg-panel { overflow-y: auto; overscroll-behavior: contain; border-left: var(--pil-line) solid var(--pil-ink); background: #fffaf0; padding: 18px 18px 24px; }

/* links: quiet by default, the selection's in ink, an answer's path in cobalt dots */
.pg-e { stroke: var(--pil-ink); stroke-opacity: .15; stroke-width: 1.2; transition: stroke-opacity .25s ease, stroke-width .25s ease; }
.is-focus .pg-e { stroke-opacity: .05; }
.pg-e.is-on { stroke-opacity: .6; stroke-width: 1.8; }
.is-asking .pg-e.is-on { stroke-opacity: .16; }
.pg-trail { stroke: var(--pil-cobalt); stroke-width: 3.4; stroke-linecap: round; stroke-dasharray: 0 7.5; opacity: 0; transition: opacity .3s ease; }
.pg-trail.is-shown { opacity: 1; }

/* nodes */
.pg-n { cursor: pointer; outline: none; transition: opacity .25s ease; }
.pg-n-hit { fill: transparent; }
.pg-n-bg { fill: var(--pil-paper); }
.pg-n--team .pg-n-bg { fill: var(--pil-green-soft); }
.pg-n--project .pg-n-bg { fill: var(--pil-yellow-soft); }
.pg-n.is-hub .pg-n-bg { fill: var(--pil-yellow); }
.pg-n--decision .pg-n-bg { fill: #fde3dd; }
.pg-n--meeting .pg-n-bg { fill: var(--pil-cobalt-soft); }
.pg-n--file .pg-n-bg { fill: #f2eee5; }
.pg-n--finding .pg-n-bg { fill: var(--pil-yellow-soft); }
.pg-n-ring { fill: none; stroke: var(--pil-ink); stroke-width: 2; transition: stroke .2s ease, stroke-width .2s ease; }
.pg-n-label { font: 500 12px/1 var(--font-body); fill: var(--pil-ink); text-anchor: middle; paint-order: stroke; stroke: var(--pil-paper); stroke-width: 6px; stroke-opacity: .95; stroke-linejoin: round; pointer-events: none; }
.pg-n-label.is-key { font-weight: 600; }
.pg-n-label { transition: opacity .25s ease; }
/* the faded shapes step far back, their names less so: a name stays readable (3:1 or more) and tappable */
.is-focus .pg-n:not(.is-on):not(.is-path) { opacity: .2; }
.is-asking .pg-n.is-on:not(.is-path) { opacity: .4; }
.is-focus .pg-n-label:not(.is-on):not(.is-path), .is-asking .pg-n-label.is-on:not(.is-path) { opacity: .55; }
.pg-n.is-sel .pg-n-ring { stroke-width: 3.6; }
.pg-n.is-path .pg-n-ring { stroke: var(--pil-cobalt); stroke-width: 3.2; }
.pg-n:focus-visible .pg-n-ring { stroke: var(--pil-cobalt); stroke-width: 3.6; }
.pg-n:hover .pg-n-ring { stroke-width: 3; }
.is-compact .pg-n-label:not(.is-key):not(.is-on):not(.is-path) { display: none; }

/* the map breathes: each node drifts a couple of pixels, out of step with its neighbours */
.pg-bob { animation: pg-bob 7s ease-in-out infinite; animation-delay: calc(var(--i, 0) * -1s); }
@keyframes pg-bob { 50% { transform: translateY(-2.5px); } }
@media (prefers-reduced-motion: reduce) { .pg-bob { animation: none; } .pg-trail, .pg-e, .pg-n { transition: none; } }

/* ── The panel: hello, a node, an answer ───────────────────── */
.pg-hello { display: grid; justify-items: center; text-align: center; padding-top: 6px; }
.pg-hello img { width: 132px; }
.pg-hello-t { margin-top: 6px; font: 400 25px/1.15 var(--pil-display); }
.pg-hello-s { margin-top: 18px; font: 14px var(--font-body); color: var(--text-muted); }
.pg-asks { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 10px; width: 100%; }
.pg-ask { display: block; width: 100%; text-align: left; font: 500 15px/1.3 var(--pil-body); color: var(--pil-ink); text-decoration: none; padding: 12px 14px; border: 2px solid var(--pil-ink); border-radius: 14px; background: var(--pil-paper); box-shadow: 3px 3px 0 var(--pil-ink); cursor: pointer; }
.pg-ask:hover, .pg-ask:focus-visible { background: var(--pil-yellow-soft); }
.pg-ask--card { margin-top: 8px; background: var(--pil-yellow); }
.pg-ask--card:hover, .pg-ask--card:focus-visible { background: #f8d462; }

.pg-back-map { font: 14px var(--font-body); color: var(--text-muted); background: none; border: 0; padding: 4px 0; cursor: pointer; }
.pg-back-map::before { content: "\2190\00a0"; }
.pg-back-map:hover { color: var(--text); }
.pg-card-top { margin-top: 10px; display: flex; align-items: center; gap: 12px; }
.pg-pic { flex: none; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; border: 2px solid var(--pil-ink); background: var(--pil-paper); overflow: hidden; }
.pg-pic img { width: 74%; }
.pg-pic--person img { width: 118%; margin-top: 14px; }
.pg-pic--team { background: var(--pil-green-soft); }
.pg-pic--project, .pg-pic--finding { background: var(--pil-yellow-soft); }
.pg-pic--decision { background: #fde3dd; }
.pg-pic--meeting { background: var(--pil-cobalt-soft); }
.pg-pic--file { background: #f2eee5; }
.pg-card h3 { margin: 0; font: 400 24px/1.12 var(--pil-display); letter-spacing: -0.01em; }
.pg-card-meta { margin-top: 3px; font: 14px var(--font-body); color: var(--text-muted); }
.pg-card-what { margin-top: 12px; font-size: 15.5px; line-height: 1.45; }
.pg-card-k { margin-top: 20px; font: 14px var(--font-body); color: var(--text-muted); }
.pg-card-links { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; }

.pg-chip { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; font: 500 14.5px/1.25 var(--pil-body); color: var(--pil-ink); padding: 6px 10px 6px 6px; border: 1.5px solid var(--border-strong); border-radius: 12px; background: var(--pil-paper); cursor: pointer; }
.pg-chip:hover, .pg-chip:focus-visible { border-color: var(--pil-ink); }
.pg-chip-pic { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; border: 1.5px solid var(--pil-ink); background: var(--pil-paper); overflow: hidden; }
.pg-chip-pic img { width: 76%; }
.pg-chip--person .pg-chip-pic img { width: 120%; margin-top: 8px; }
.pg-chip--team .pg-chip-pic { background: var(--pil-green-soft); }
.pg-chip--project .pg-chip-pic, .pg-chip--finding .pg-chip-pic { background: var(--pil-yellow-soft); }
.pg-chip--decision .pg-chip-pic { background: #fde3dd; }
.pg-chip--meeting .pg-chip-pic { background: var(--pil-cobalt-soft); }
.pg-chip--file .pg-chip-pic { background: #f2eee5; }
.pg-chip-name { flex: 1; min-width: 0; }
.pg-chip small { flex: none; font: 13px var(--font-body); color: var(--text-muted); }

.pg-ans { margin-top: 16px; }
.pg-ans-q { padding: 12px 16px; background: var(--bg); border: 1px solid var(--border-strong); border-radius: 18px 18px 18px 6px; font: 400 18px/1.3 var(--pil-display); }
.pg-ans-q::before { content: "\201C"; }
.pg-ans-q::after { content: "\201D"; }
.pg-ans-a { margin-top: 12px; display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 10px; align-items: start; }
.pg-ans-a img { width: 52px; }
.pg-ans-a p { font: 400 18.5px/1.38 var(--pil-display); }
.pg-ans-k { margin-top: 16px; font: 14px var(--font-body); color: var(--pil-cobalt); }
/* the links Par followed, in order, joined by the memory path's cobalt dots */
.pg-ans-path { list-style: none; margin: 8px 0 0; padding: 0 0 0 14px; border-left: 3px dotted var(--pil-cobalt); display: grid; gap: 6px; }

/* ── Legend, the list, how it's made ───────────────────────── */
.pg-legend { list-style: none; margin: 22px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 22px; }
.pg-legend li { display: flex; align-items: center; gap: 8px; font-size: 14.5px; color: var(--text-muted); }
.pg-legend img { width: 34px; height: 34px; object-fit: contain; }
.pg-legend li:first-child img { border-radius: 50%; border: 1.5px solid var(--pil-ink); object-fit: cover; object-position: 50% 0; background: var(--pil-paper); }

.pg-list { margin-top: 28px; }
.pg-more > summary { list-style: none; width: max-content; max-width: 100%; min-height: 44px; display: flex; align-items: center; font-size: 15px; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.pg-more > summary::-webkit-details-marker { display: none; }
.pg-index { list-style: none; margin: 14px 0 0; padding: 0; columns: 2 320px; column-gap: 28px; }
.pg-node { break-inside: avoid; padding: 14px 0 16px; border-top: 1px solid var(--border-strong); scroll-margin-top: 24px; }
.pg-node h3 { margin: 0; font: 400 21px/1.2 var(--font-display); }
.pg-meta { margin-top: 2px; font: 14px var(--font-body); color: var(--text-muted); }
.pg-what { margin-top: 6px; font-size: 15px; }
/* each link is at least 24 px tall with room around it, 44 px on a touch screen */
.pg-links { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 14px; }
.pg-links a { display: inline-flex; align-items: center; min-height: 24px; }
.pg-links a::before { content: attr(data-rel) "\00a0"; color: var(--text-muted); font: 13px var(--font-body); }
@media (pointer: coarse) { .pg-links { gap: 0 16px; } .pg-links a { min-height: 44px; } .pg-back-map { min-height: 44px; } }
.pg-qa { margin-top: 10px; padding-left: 12px; border-left: 3px dotted var(--pil-cobalt); }
.pg-q { font: italic 400 17px/1.3 var(--font-display); }
.pg-a { margin-top: 4px; font-size: 15px; color: var(--text-muted); }

.pg-how { margin-top: clamp(84px, 11vw, 156px); }
.pg-how h2 { font-size: clamp(34px, 4.8vw, 62px); line-height: 1.04; max-width: 20ch; }
.pg-how h2 .pil-key { display: block; }

.hp-start .hp-ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; }
.pg-back { font-size: 15px; text-underline-offset: 3px; }

/* ── Phone: the window goes edge to edge, the panel sits under the map ── */
@media (max-width: 760px) {
  .pg-app { margin-inline: calc(-1 * var(--gutter)); border-radius: 0; border-left: 0; border-right: 0; box-shadow: none; }
  .pg-stage { grid-template-columns: 1fr; height: auto; }
  .pg-canvas { height: min(160vw, 640px); }
  .pg-panel { border-left: 0; border-top: var(--pil-line) solid var(--pil-ink); overflow: visible; }
  .pg-hello { grid-template-columns: 76px minmax(0, 1fr); justify-items: start; text-align: left; column-gap: 12px; align-items: center; }
  .pg-hello img { width: 76px; grid-row: span 2; }
  .pg-hello-t { margin-top: 0; font-size: 22px; }
  .pg-hello-s { margin-top: 0; }
  .pg-asks { grid-column: 1 / -1; margin-top: 14px; }
  .pil-ui-faces { display: none; }
  .pg-legend { gap: 8px 16px; }
  .pg-legend li { font-size: 13.5px; }
  .pg-legend img { width: 28px; height: 28px; }
  .pg-how .hp-steps li { display: grid; grid-template-columns: 30px 1fr; gap: 12px; align-items: start; }
  .pg-how .hp-n { margin-top: 2px; }
  .pg-how .hp-say { margin-top: 0; font-size: 21px; }
}

/* faces in the window's bar are round stickers, as in the kit */
.pg-app .pil-ui-faces img { border-radius: 50%; border: 2px solid var(--pil-ink); background: var(--pil-paper); object-fit: cover; object-position: 50% 0; }

/* The home page’s leaf-green band, with its paper foreground. */
:root { --leaf: #1c4b30; --on-leaf: #f7f0e1; }
.hp-start { background: var(--leaf); color: var(--on-leaf); width: 100%; margin-inline: 0; padding: clamp(48px, 6.5vw, 96px) max(var(--gutter), calc((100vw - var(--wrap)) / 2)); border-top: 0; }
.hp-start h2 { color: inherit; }
.hp-start .pil-key { color: inherit; }
.hp-start .cb-now, .hp-start .pg-close-copy { color: inherit; max-width: 44ch; margin-top: 20px; font-size: clamp(19px, 1.8vw, 23px); line-height: 1.45; }
.hp-start :focus-visible { outline-color: var(--on-leaf); }
.hp-start .pg-back { color: inherit; }

.pg-edge-label { pointer-events: none; }
.pg-edge-label rect { fill: var(--pil-paper); stroke: var(--border-strong); stroke-width: 1; }
.pg-edge-label text { fill: var(--pil-ink); font-family: var(--font-body); font-weight: 500; }

/* A tap lights the node, its neighbours and the links between them; the rest fades where it is. */
.is-focus .pg-bob { animation: none; }
.is-focus .pg-e:not(.is-on) { stroke-opacity: .07; }
.is-focus .pg-e.is-on { stroke-opacity: .85; stroke-width: 2; }
/* While Par answers, its cobalt path leads and the plain links step back. */
.is-asking .pg-e.is-on { stroke-opacity: .22; }