/**
 * Platform / How It Connects (interactive).
 *
 * Condensed rework ported from
 * pi-handoff/reference/how-it-connects/hic-rework-proposal.html onto
 * PI's own tokens (pi-theme-vars.php): --pi-diagram-* for the five
 * system colors (exact value matches with the proposal's own --c-*
 * custom properties), --pi-bg-page/--pi-bg-surface for its two dark
 * surfaces, --pi-text-* for its three text tones, --pi-grad-fyre for
 * the Play button and headline gradient, --pi-font-body in place of a
 * Google Fonts DM Sans import, and the site's own :focus-visible ring
 * (pi-global.css) rather than a redeclared one. One container query at
 * 880px: narrower stacks the map top to bottom, at 880px and wider it
 * reads left to right - see pi-handoff/docs/how-it-connects-rework.md
 * for what this replaces and why.
 *
 * Three fixes the proposal still needed on phones, kept close to
 * their rules so the reasoning travels with them:
 * reader cards collapse to single-column rows and Shopify records to
 * 2 columns under 330px (card titles read as cramped at 320/360), the
 * step bar becomes a plain progress indicator under 880px (the
 * segments are too narrow to tap there), and the readout's sticky
 * offset clears the site nav instead of pinning to the literal
 * viewport top.
 */
/* The Home teaser links to /platform/#how-it-connects, so
   this needs to clear the fixed nav on a direct jump - same 180px
   every other Platform pillar's own scroll-margin-top uses. */
/* 48/40 (not the site's usual larger section padding) is
   load-bearing for the doc's own height check - at 375 this section
   has to come in at 1400px or less, matching the proposal's own
   compact padding exactly keeps that promise. */
.pi-hic { container: pi-hic / inline-size; padding-block: 48px 40px; padding-inline: var(--pi-content-pad); box-sizing: border-box; scroll-margin-top: 180px; }

.pi-hic__head { display: grid; gap: 14px; max-width: 760px; }
.pi-hic__eyebrow { font-family: var(--pi-font-body); font-weight: 700; font-size: 13px; line-height: 16px; letter-spacing: 0.16em; text-transform: uppercase; background: var(--pi-grad-fyre); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pi-hic__heading { margin: 0; font-family: var(--pi-font-body); font-weight: 400; font-size: clamp(28px, 4.2cqi, 46px); line-height: 1.15; letter-spacing: -0.02em; color: var(--pi-text-primary); text-wrap: balance; }
.pi-hic__heading-highlight { font-weight: 700; background: var(--pi-grad-fyre); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pi-hic__sub { margin: 0; font-family: var(--pi-font-body); color: var(--pi-text-secondary); font-size: 16px; line-height: 1.55; max-width: 56ch; text-wrap: pretty; }

.pi-hic__explorer { position: relative; margin-top: 28px; background: var(--pi-bg-surface); border: 1px solid rgba(255,255,255,0.08); border-radius: 18px; }

/* ---- map ---- */
.pi-hic__map { display: grid; padding: 16px 14px 18px; }
.pi-hic__group { display: grid; gap: 8px; align-content: center; min-width: 0; }
.pi-hic__label { font-family: var(--pi-font-body); font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--pi-text-body); }
.pi-hic__nodes, .pi-hic__records { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.pi-hic__group--in .pi-hic__nodes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pi-hic__group--out .pi-hic__nodes { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.pi-hic__node {
  --c: var(--pi-diagram-erp);
  appearance: none; width: 100%; height: 100%; cursor: pointer; text-align: left; font: inherit; color: inherit;
  display: grid; align-content: start; gap: 6px; padding: 12px;
  background: var(--pi-bg-raised-2); border: 1px solid rgba(255,255,255,0.16); border-radius: 12px; box-sizing: border-box;
  transition: opacity 0.25s, border-color 0.25s, background-color 0.25s, box-shadow 0.25s;
}
.pi-hic__node-icon { display: flex; }
.pi-hic__node-icon img { display: block; }
/* .pi-hic__node has color:inherit (the sitewide button reset) and
   nothing between it and <body> sets a color - body itself has none
   either (every How It Connects element without
   its own explicit color used to fall back to the browser default).
   Black-on-black without this. */
.pi-hic__node-title { font-family: var(--pi-font-body); font-size: 14px; font-weight: 600; line-height: 1.25; color: var(--pi-text-primary); }
.pi-hic__node-sub { font-family: var(--pi-font-body); font-size: 12px; color: var(--pi-text-body); line-height: 1.35; }
.pi-hic__node-body { display: none; }
/* Narrow cards show the short label (e.g. "Catalog") to avoid
   wrapping; wide cards have the room for the full one - flipped back
   at the 880px tier below. */
.pi-hic__text--full { display: none; }
@media (hover: hover) {
  .pi-hic__node:hover { border-color: color-mix(in srgb, var(--c) 60%, transparent); }
}
.pi-hic__node.is-lit, .pi-hic__node[aria-pressed="true"] {
  border-color: var(--c);
  background: color-mix(in srgb, var(--c) 13%, var(--pi-bg-raised-2));
  box-shadow: 0 0 0 1px var(--c), 0 0 28px -8px var(--c);
}
/* The proposal's icons are currentColor <use> refs,
   so it mutes a swapped icon with `color`. Ours are pre-colored Figma
   exports (hic-icon-*.svg), which an external <img> can't recolor
   that way - a grayscale filter gets the same "placeholder, not the
   real icon" read instead. */
.pi-hic__node.is-swapped { border-style: dashed; border-color: var(--c); background: transparent; box-shadow: none; }
.pi-hic__node.is-swapped .pi-hic__node-icon img { filter: grayscale(1) brightness(1.6); opacity: 0.6; }
.is-dim { opacity: 0.38; }

/* ---- pipes ---- */
.pi-hic__pipe { --c: rgba(255,255,255,0.22); display: flex; flex-direction: column; align-items: center; height: 40px; padding-block: 4px; color: var(--c); }
.pi-hic__pipe-line { flex: 1; width: 2px; background: repeating-linear-gradient(to bottom, var(--c) 0 5px, transparent 5px 10px); }
.pi-hic__pipe-arrow { width: 12px; height: 8px; flex: none; fill: currentColor; }
.pi-hic__pipe-arrow--right { display: none; }
.pi-hic__pipe.is-on .pi-hic__pipe-line { background-image: repeating-linear-gradient(to bottom, var(--c) 0 6px, transparent 6px 10px); animation: pi-hic-flow-y 0.5s linear infinite; }
@keyframes pi-hic-flow-y { to { background-position: 0 10px; } }
@keyframes pi-hic-flow-x { to { background-position: 10px 0; } }

/* ---- hub ---- */
.pi-hic__hub {
  --c: var(--pi-diagram-shopify);
  display: grid; gap: 14px; padding: 16px 14px 14px; border-radius: 16px; box-sizing: border-box;
  border: 1px solid color-mix(in srgb, var(--c) 55%, transparent);
  background: radial-gradient(130% 90% at 50% 0%, color-mix(in srgb, var(--c) 15%, transparent), transparent 70%), var(--pi-bg-page);
}
.pi-hic__hub-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.pi-hic__hub-eyebrow { font-family: var(--pi-font-body); font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--c); }
.pi-hic__hub-heading { margin: 4px 0 0; font-family: var(--pi-font-body); font-size: 18px; font-weight: 600; line-height: 1.25; color: var(--pi-text-primary); }
.pi-hic__tag { display: none; flex: none; font-family: var(--pi-font-body); font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--c); padding: 6px 12px; border-radius: 999px; background: color-mix(in srgb, var(--c) 12%, transparent); border: 1px solid color-mix(in srgb, var(--c) 35%, transparent); }
.pi-hic__records { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pi-hic__record {
  appearance: none; width: 100%; height: 100%; cursor: pointer; font: inherit; color: inherit;
  display: grid; justify-items: center; align-content: center; gap: 6px; padding: 11px 4px; text-align: center; box-sizing: border-box;
  border-radius: 10px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08);
  transition: opacity 0.25s, border-color 0.25s, background-color 0.25s;
}
.pi-hic__record img { display: block; }
.pi-hic__record-title { font-family: var(--pi-font-body); font-size: 12px; font-weight: 500; line-height: 1.2; color: var(--pi-text-primary); }
.pi-hic__record-body { display: none; }
@media (hover: hover) {
  .pi-hic__record:hover { border-color: color-mix(in srgb, var(--pi-diagram-shopify) 45%, transparent); }
}
.pi-hic__record.is-lit, .pi-hic__record[aria-pressed="true"] { border-color: var(--pi-diagram-shopify); background: color-mix(in srgb, var(--pi-diagram-shopify) 14%, transparent); }

/* ---- readout: the one place text appears ---- */
/* Sticks under the site nav instead of the literal
   viewport top - --pi-hic-dock-top is kept current by pi-how-it-
   connects.js using the exact same formula as the docked pillar nav
   (pi-motion.js): the nav's own height plus a 12px gap while it
   shows, just the 12px gap while .pi-nav--hidden. Animating top the
   same way keeps the readout from jumping when the nav slides away. */
.pi-hic__readout {
  position: sticky; top: var(--pi-hic-dock-top, 12px); z-index: 2;
  display: grid; gap: 12px; padding: 16px 14px 14px; box-sizing: border-box;
  background: color-mix(in srgb, var(--pi-bg-surface) 92%, transparent);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255,255,255,0.08); border-radius: 18px 18px 0 0;
  transition: top var(--pi-motion-base) var(--pi-ease-out);
}
.pi-hic__readout-copy { display: grid; gap: 4px; align-content: start; min-height: 88px; min-width: 0; }
.pi-hic__readout-eyebrow { font-family: var(--pi-font-body); font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ro, var(--pi-accent-orange)); font-variant-numeric: tabular-nums; }
.pi-hic__readout-text { margin: 0; font-family: var(--pi-font-body); font-size: 15px; line-height: 1.5; color: var(--pi-text-primary); text-wrap: pretty; }
.pi-hic__readout-meta { margin: 0; font-family: var(--pi-font-body); font-size: 13px; line-height: 1.45; color: var(--pi-text-body); }
/* display can't sit on the bare selector - an unconditional
   display:inline-flex here beats the browser's own [hidden]{display:
   none} (author CSS always wins over the UA stylesheet, even at
   equal specificity), so the button never actually hid: an empty
   <img src=""> rendered in its place at rest, before any system was
   ever clicked. */
.pi-hic__readout-action { appearance: none; justify-self: start; align-items: center; gap: 6px; margin-top: 4px; padding: 4px 0; border: 0; background: none; cursor: pointer; font-family: var(--pi-font-body); font-size: 13px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--pi-accent-orange); }
.pi-hic__readout-action:not([hidden]) { display: inline-flex; }
.pi-hic__readout-action-icon { width: 15px; height: 15px; }

.pi-hic__controls { display: flex; align-items: center; gap: 8px; }
.pi-hic__play { appearance: none; flex: none; display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 18px; border: 0; border-radius: 999px; background: var(--pi-grad-fyre); color: #fff; cursor: pointer; font-family: var(--pi-font-body); font-size: 13px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; position: relative; }
.pi-hic__play-icon { width: 15px; height: 15px; }
.pi-hic__play-label--wide { display: none; }
.pi-hic__nav { appearance: none; flex: none; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 999px; border: 1px solid rgba(255,255,255,0.16); background: none; cursor: pointer; }
@media (hover: hover) {
  .pi-hic__nav:hover { border-color: rgba(255,255,255,0.3); }
}
.pi-hic__segs { flex: 1; min-width: 0; display: flex; gap: 4px; }
.pi-hic__seg { appearance: none; flex: 1; height: 40px; padding: 0; border: 0; background: none; cursor: pointer; position: relative; }
.pi-hic__seg::before { content: ""; position: absolute; inset: 18px 0 auto; height: 4px; border-radius: 2px; background: rgba(255,255,255,0.14); transition: background 0.25s; }
.pi-hic__seg.is-done::before { background: rgba(255,255,255,0.45); }
.pi-hic__seg[aria-current="step"]::before { background: var(--pi-grad-fyre); }
.pi-hic__seg-label { display: none; }
/* Under 880px the six segments run 10 to 18px wide,
   too narrow to tap - pi-how-it-connects.js disables them there
   (tabindex -1, aria-hidden) and leaves only the 40px previous/next
   buttons and the readout's own "Step N of 6" text (already
   announced via aria-live) to move through the flow. */
.pi-hic__seg[aria-hidden="true"] { pointer-events: none; cursor: default; }

/* invite: a soft ring on Play until someone interacts with the section */
.pi-hic__play.is-inviting::after { content: ""; position: absolute; inset: -4px; border-radius: inherit; border: 2px solid var(--pi-accent-orange); opacity: 0; animation: pi-hic-invite 2.2s ease-out infinite; }
@keyframes pi-hic-invite { 0% { opacity: 0.7; transform: scale(0.96); } 70%, 100% { opacity: 0; transform: scale(1.14); } }
/* The site wide pause toggle stops the moving pipe dashes and
   the invite pulse (pi-how-it-connects.js stops playback itself on
   the same toggle, via the pi-motion-change event). */
html[data-motion="paused"] .pi-hic__pipe.is-on .pi-hic__pipe-line,
html[data-motion="paused"] .pi-hic__play.is-inviting::after {
  animation-play-state: paused;
}

/* ---- why it matters + swap ---- */
.pi-hic__why { margin-top: 16px; display: grid; gap: 14px; padding: 18px 16px; border-radius: 16px; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08); box-sizing: border-box; }
.pi-hic__why p { margin: 0; font-family: var(--pi-font-body); font-size: 15px; line-height: 1.5; color: var(--pi-text-secondary); }
.pi-hic__why strong { color: var(--pi-text-primary); font-weight: 600; }
.pi-hic__chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.pi-hic__chips-label { flex-basis: 100%; font-family: var(--pi-font-body); font-size: 13px; color: var(--pi-text-body); }
.pi-hic__chip { --c: var(--pi-diagram-search); appearance: none; display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.16); background: none; cursor: pointer; font-family: var(--pi-font-body); font-size: 14px; color: var(--pi-text-primary); }
.pi-hic__chip i { width: 8px; height: 8px; border-radius: 50%; background: var(--c); font-style: normal; }
@media (hover: hover) {
  .pi-hic__chip:hover { border-color: color-mix(in srgb, var(--c) 60%, transparent); }
}
.pi-hic__chip[aria-pressed="true"] { border-color: var(--c); border-style: dashed; background: color-mix(in srgb, var(--c) 12%, transparent); }

/* ---- Under a 330px container, the three READER
   cards (3 columns, so the narrowest cards on the page) collapse to
   one column of rows with icon, title and short line side by side,
   and the six Shopify records drop to 2 columns from 3. The proposal
   found actual clipping at 320/360 in its own 2/3-column grids;
   .pi-hic__node-title/-record-title here wrap instead of clipping, so
   nothing truly overflows even without this, but a 2-line wrapped
   title at the tightest widths still reads as cramped, and the fix is
   explicitly called for - kept, tuned to this site's own padding. The
   two WRITER cards are already a 2-column grid with half as many
   items, so they're not part of this - only readers and records were
   ever cramped. 330 (not the doc's own 340) because --pi-content-
   pad's 20px mobile gutter eats 8px more of the container's width
   each side than the proposal's flat 16px did; re-measured against
   this site's actual padding so 375 (this site's narrowest required
   check width, container ~335px) clears it the same way the doc's
   own 375 did, while 320/360 (containers ~280/320px) still get it. */
@container pi-hic (max-width: 330px) {
  .pi-hic__group--out .pi-hic__nodes { grid-template-columns: 1fr; }
  .pi-hic__group--out .pi-hic__node { grid-template-columns: 28px minmax(0, 1fr); column-gap: 10px; row-gap: 2px; align-items: center; }
  .pi-hic__group--out .pi-hic__node-icon { grid-row: span 2; }
  .pi-hic__group--out .pi-hic__node-icon img { width: 18px; height: 18px; }
  .pi-hic__records { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---- wide: same map, left to right ---- */
@container pi-hic (min-width: 880px) {
  .pi-hic__head { text-align: center; justify-items: center; margin-inline: auto; }
  .pi-hic__sub { font-size: 18px; }
  .pi-hic__explorer { margin-top: 40px; border-radius: 20px; }
  .pi-hic__map { grid-template-columns: minmax(0, 1fr) 48px minmax(0, 1.6fr) 48px minmax(0, 1fr); align-items: center; padding: 28px; }
  .pi-hic__group--in .pi-hic__nodes, .pi-hic__group--out .pi-hic__nodes { grid-template-columns: 1fr; }
  .pi-hic__node { grid-template-columns: 36px minmax(0, 1fr); column-gap: 12px; row-gap: 2px; padding: 14px; align-items: center; }
  .pi-hic__node-icon { grid-row: span 2; width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: color-mix(in srgb, var(--c) 14%, transparent); }
  .pi-hic__node-title { font-size: 15px; }
  .pi-hic__text--short { display: none; }
  .pi-hic__text--full { display: inline; }
  .pi-hic__node-sub { display: none; }
  .pi-hic__node-body { display: block; font-family: var(--pi-font-body); font-size: 13px; line-height: 1.4; color: var(--pi-text-body); }
  .pi-hic__pipe { flex-direction: row; height: auto; width: 100%; padding-inline: 4px; padding-block: 0; }
  .pi-hic__pipe-line { height: 2px; width: auto; background: repeating-linear-gradient(to right, var(--c) 0 5px, transparent 5px 10px); }
  .pi-hic__pipe.is-on .pi-hic__pipe-line { background-image: repeating-linear-gradient(to right, var(--c) 0 6px, transparent 6px 10px); animation-name: pi-hic-flow-x; }
  .pi-hic__pipe-arrow { width: 8px; height: 12px; }
  .pi-hic__pipe-arrow--down { display: none; }
  .pi-hic__pipe-arrow--right { display: block; }
  .pi-hic__hub { padding: 20px; gap: 16px; }
  .pi-hic__hub-heading { font-size: 20px; }
  .pi-hic__tag { display: inline-block; }
  .pi-hic__records { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pi-hic__record { grid-template-columns: 32px minmax(0, 1fr); justify-items: start; text-align: left; column-gap: 10px; row-gap: 1px; padding: 11px 12px; align-items: center; }
  .pi-hic__record img { grid-row: span 2; justify-self: center; }
  .pi-hic__record-title { font-size: 13.5px; font-weight: 600; }
  .pi-hic__record-body { display: block; font-family: var(--pi-font-body); font-size: 12.5px; line-height: 1.35; color: var(--pi-text-body); }
  .pi-hic__readout { position: static; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 40px; padding: 24px 28px; -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--pi-bg-surface); border-radius: 20px 20px 0 0; }
  .pi-hic__readout-copy { min-height: 84px; align-content: center; }
  .pi-hic__readout-text { font-size: 18px; }
  .pi-hic__controls { align-items: flex-start; }
  .pi-hic__play { height: 48px; padding: 0 22px; font-size: 14px; }
  .pi-hic__nav { margin-top: 4px; }
  .pi-hic__segs { flex: none; width: 372px; }
  .pi-hic__seg { height: 48px; pointer-events: auto; cursor: pointer; }
  .pi-hic__seg::before { inset: 14px 0 auto; }
  .pi-hic__seg-label { display: block; position: absolute; left: 0; right: 0; top: 26px; font-family: var(--pi-font-body); font-size: 11px; font-weight: 500; letter-spacing: 0.02em; color: var(--pi-text-body); text-align: center; transition: color 0.25s; }
  .pi-hic__seg[aria-current="step"] .pi-hic__seg-label { color: var(--pi-text-primary); }
  .pi-hic__seg.is-done .pi-hic__seg-label { color: var(--pi-text-secondary); }
  .pi-hic__play-label--wide { display: inline; }
  .pi-hic__play-label--tight { display: none; }
  .pi-hic__chips-label { flex-basis: auto; margin-right: 2px; }
  .pi-hic__why { margin-top: 20px; grid-template-columns: minmax(0, 1fr) auto; align-items: center; padding: 16px 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .pi-hic__pipe.is-on .pi-hic__pipe-line { animation: none; }
  .pi-hic__play.is-inviting::after { animation: none; opacity: 0; }
  .pi-hic__node, .pi-hic__record { transition: none; }
  .pi-hic__readout { transition: none; }
}