/* E-commerce platform migrations. Builds on studio-luxury.css tokens, guides.css layout and the
   shared pieces of shopify-pricing-history/history.css (hero actions, chart card, files, FAQ).
   Series colours are the validated dark categorical slots 1-3 (checked against --bg-card #0f2521):
   Shopify slot 1, WooCommerce slot 2, every other platform slot 3. */
/* Arial scaled to Plus Jakarta Sans widths (measured per weight) with its vertical metrics (ascent 1.04,
   descent 0.22, divided by the size adjustment), so text wraps and sits the same before and
   after the web font arrives and the hero does not jump. */
@font-face { font-family: 'Jakarta Fallback'; src: local('Arial'), local('ArialMT'); font-weight: 100 550; size-adjust: 105.5%; ascent-override: 98.58%; descent-override: 20.85%; line-gap-override: 0%; }
@font-face { font-family: 'Jakarta Fallback'; src: local('Arial Bold'), local('Arial-BoldMT'); font-weight: 551 750; size-adjust: 101%; ascent-override: 102.97%; descent-override: 21.78%; line-gap-override: 0%; }
@font-face { font-family: 'Jakarta Fallback'; src: local('Arial Bold'), local('Arial-BoldMT'); font-weight: 751 1000; size-adjust: 88.8%; ascent-override: 117.12%; descent-override: 24.77%; line-gap-override: 0%; }
/* guides.css caps the title at 20ch, which is 14em in the web font but narrower in any fallback;
   in em the title wraps the same with both. */
.gd-title { max-width: 14em; }
:root { --font-sans: 'Plus Jakarta Sans', 'Jakarta Fallback', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; }
:root { --pm-shopify: #3987e5; --pm-woo: #d95926; --pm-other: #199e70; --pm-node: #7f958f; }

.pm-legend i { background: var(--c); }
.pm-k-shopify { --c: var(--pm-shopify); } .pm-k-woo { --c: var(--pm-woo); } .pm-k-other { --c: var(--pm-other); }

/* Space reserved for the chart the script draws, so nothing shifts when it appears. */
#pm-chart { min-height: 560px; }
@media (min-width: 640px) { #pm-chart { min-height: 500px; } }
#pm-chart svg { display: block; width: 100%; height: auto; overflow: visible; touch-action: pan-y; }
.pm-link { fill-opacity: 0.5; transition: fill-opacity 0.15s ease; cursor: pointer; }
.pm-link.is-shopify { fill: var(--pm-shopify); } .pm-link.is-woo { fill: var(--pm-woo); } .pm-link.is-other { fill: var(--pm-other); }
#pm-chart.is-focus .pm-link { fill-opacity: 0.12; }
#pm-chart.is-focus .pm-link.is-on { fill-opacity: 0.85; }
.pm-node rect { fill: var(--pm-node); }
.pm-node.is-shopify rect { fill: var(--pm-shopify); } .pm-node.is-woo rect { fill: var(--pm-woo); } .pm-node.is-other rect { fill: var(--pm-other); }
.pm-node { cursor: pointer; outline: none; }
.pm-node:focus-visible .pm-ring { stroke: var(--emerald-accent); stroke-width: 2; fill: none; }
.pm-name { fill: var(--text-main); font: 600 13px var(--font-sans); }
.pm-count { fill: var(--text-dim); font: 500 12px var(--font-mono); }
.pm-tip-route { color: #fff; font-weight: 600; }

.pm-bars-card { border: 1px solid var(--border-dark); background: var(--bg-card); border-radius: 18px; padding: 20px 22px; margin: 16px 0 4px; }
.pm-bars { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.pm-bar { display: grid; grid-template-columns: 150px minmax(0, 1fr) 52px; gap: 14px; align-items: center; padding: 6px 8px; border-radius: 8px; }
.pm-bar:hover { background: rgba(255, 255, 255, 0.04); }
.pm-bar-name { font-size: 14px; color: var(--text-main); font-weight: 600; }
.pm-bar-track { height: 14px; }
.pm-bar-track i { display: block; height: 100%; min-width: 2px; border-radius: 0 4px 4px 0; background: var(--pm-node); }
.pm-bar.is-shopify .pm-bar-track i { background: var(--pm-shopify); }
.pm-bar.is-woo .pm-bar-track i { background: var(--pm-woo); }
.pm-bar-value { font: 600 14px var(--font-mono); color: #fff; text-align: right; }

.pm-platforms td, .pm-flows td, .pm-bands td { font-variant-numeric: tabular-nums; white-space: nowrap; }
.pm-platforms th[scope="row"], .pm-bands th[scope="row"] { font-weight: 600; color: #fff; text-align: left; white-space: nowrap; }
.pm-platforms td.is-up { color: #6fe0b4; }
.pm-platforms td.is-down { color: #ff9a85; }
.pm-flows td:first-child { color: var(--text-dim); font-family: var(--font-mono); }
.pm-none { color: var(--text-dim); }
/* Keep the platform column in view while the table scrolls sideways on phones. */
.pm-platforms th:first-child, .pm-platforms td:first-child, .pm-bands th:first-child { position: sticky; left: 0; z-index: 1; background: var(--bg-card); }

@media (max-width: 640px) {
  .pm-bars-card { padding: 14px 12px; }
  .pm-bar { grid-template-columns: 104px minmax(0, 1fr) 44px; gap: 10px; padding: 6px 4px; }
  .pm-bar-name { font-size: 13px; }
  .pm-name { font-size: 12px; }
  .pm-count { font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) { .pm-link { transition: none; } }
@media (forced-colors: active) {
  .pm-link { fill: CanvasText !important; }
  .pm-node rect, .pm-bar-track i { fill: CanvasText; background: CanvasText !important; forced-color-adjust: none; }
}
.pm-halo { paint-order: stroke; stroke: var(--bg-card); stroke-width: 4px; stroke-linejoin: round; pointer-events: none; }
.pm-label { cursor: pointer; }