/* ==========================================================================
   Cloudstore Central — signature platform schematic
   Inline accessible SVG + optional animated walk-through. The static schematic,
   legend and textual process work with no JavaScript; motion is progressive
   enhancement and always respects prefers-reduced-motion.
   ========================================================================== */

.pd {
  margin: 0;
  display: grid;
  gap: var(--space-md);
}

.pd-figcaption {
  font-size: var(--fs-h4);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  color: var(--text-primary);
}

/* ----- stage / svg ----- */
.pd-stage {
  position: relative;
  border: var(--border-hairline);
  border-radius: var(--radius-lg);
  background: var(--bg-subtle);
  padding: clamp(0.75rem, 0.4rem + 1.5vw, 1.5rem);
  overflow: hidden;
}
.pd-svg {
  display: block;
  width: 100%;
  height: auto;
}

/* ----- coordinate grid ----- */
.pd-grid-line { stroke: var(--colour-neutral-light); stroke-width: 1; }
.pd-grid { opacity: 0.6; }

/* ----- zone labels ----- */
.pd-zone-label {
  fill: var(--text-secondary);
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: var(--fw-semibold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* ----- central platform ----- */
.pd-core-rect { fill: var(--colour-navy); stroke: var(--colour-navy); }
.pd-core-title {
  fill: #fff;
  font-family: var(--font-sans);
  font-size: 24px;
  font-weight: var(--fw-bold);
  letter-spacing: 0.04em;
}
.pd-core-sub {
  fill: #fdb9e4;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: var(--fw-medium);
}

/* ----- nodes ----- */
.pd-node rect {
  fill: var(--colour-cloud-white);
  stroke: var(--colour-neutral-dark);
  stroke-width: 1.5;
  transition: stroke var(--duration) var(--easing),
    stroke-width var(--duration) var(--easing);
}
.pd-node--signal rect { fill: color-mix(in srgb, var(--colour-cyan) 14%, white); stroke: var(--colour-cyan); }
.pd-node--primary rect { fill: color-mix(in srgb, var(--colour-cyan) 20%, white); stroke: var(--colour-cyan); stroke-width: 2.5; }
.pd-node--status rect { fill: color-mix(in srgb, var(--colour-teal) 12%, white); stroke: var(--colour-teal); stroke-width: 1.8; }
.pd-node--data rect { fill: var(--colour-blue-dark); stroke: var(--colour-blue-dark); }
.pd-node--output rect { fill: var(--bg-subtle); stroke: var(--colour-neutral-dark); }
.pd-node-label {
  fill: var(--colour-ink);
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: var(--fw-semibold);
}
.pd-node-sub {
  fill: var(--colour-muted);
  font-family: var(--font-sans);
  font-size: 12px;
}
.pd-on-dark { fill: #fff; }

/* ----- full-width layout (How Cloudstore Works): diagram fills the wide container ----- */
.platform-architecture--full { padding-inline: 0; }
.platform-architecture--full .diagram { max-width: 100%; }

/* ----- flows: each distinguished by its own colour + line pattern (no arrowheads);
   direction is conveyed by the animated pulse, not by markers ----- */
.pd-flow { fill: none; stroke: var(--colour-neutral-dark); stroke-width: 1.6; }
.pd-flow--content { stroke: var(--colour-navy); stroke-width: 2; }
.pd-flow--fulfil { stroke: var(--colour-navy); stroke-width: 2.2; stroke-dasharray: 12 7; }
.pd-flow--order { stroke: var(--colour-enterprise-blue); stroke-width: 2.2; }
.pd-flow--data { stroke: var(--colour-enterprise-blue); stroke-width: 1.8; stroke-dasharray: 2 6 10 6; }
.pd-flow--job { stroke: var(--colour-cyan); stroke-width: 3.2; }
.pd-flow--rights { stroke: var(--colour-teal); stroke-width: 2; stroke-dasharray: 8 5; }
.pd-flow--ship { stroke: var(--colour-enterprise-blue); stroke-width: 2.4; stroke-dasharray: 10 4; }
.pd-flow--status { stroke: var(--colour-cyan); stroke-width: 2; stroke-dasharray: 4 4; }
.pd-flow--report { stroke: var(--colour-neutral-dark); stroke-width: 2.6; stroke-dasharray: 1.5 7; stroke-linecap: round; }

/* ----- external shipping systems container + stakeholder visibility band ----- */
.pd-extbox { fill: none; stroke: var(--colour-neutral-mid); stroke-width: 1.4; stroke-dasharray: 6 5; }
.pd-stake-box { fill: var(--bg-subtle); stroke: var(--colour-neutral-mid); stroke-width: 1.4; stroke-dasharray: 6 5; transition: stroke var(--duration) var(--easing); }
.pd-stake-title { fill: var(--text-secondary); font-family: var(--font-sans); font-size: 14px; font-weight: var(--fw-semibold); letter-spacing: 0.03em; text-transform: uppercase; }
.pd-stake-chip rect { fill: var(--colour-cloud-white); stroke: var(--colour-neutral-light); stroke-width: 1; }
.pd-stake-chip-text { fill: var(--colour-ink); font-family: var(--font-sans); font-size: 12px; font-weight: var(--fw-medium); }
.pd-stake.is-active .pd-stake-box { stroke: var(--colour-cyan); stroke-width: 2.5; stroke-dasharray: none; }

/* ----- active / playing states (enhancement) ----- */
.pd-node.is-active rect { stroke: var(--colour-cyan); stroke-width: 3.5; }
.pd-node.is-candidate rect { stroke: var(--colour-teal); stroke-width: 2.5; stroke-dasharray: 5 4; }
.pd-flow.is-active { stroke: var(--colour-cyan); stroke-width: 4; }
.pd-flow--rights.is-active,
.pd-flow--report.is-active,
.pd-flow--fulfil.is-active,
.pd-flow--ship.is-active,
.pd-flow--status.is-active,
.pd-flow--data.is-active { stroke-dasharray: none; }

.pd.is-playing .pd-node:not(.is-active):not(.is-candidate) { opacity: 0.28; transition: opacity var(--duration) var(--easing); }
.pd.is-playing .pd-core { opacity: 1; }
/* dim the supporting bands while a phase is spotlit, unless they are the focus */
.pd.is-playing .pd-stake:not(.is-active) { opacity: 0.5; transition: opacity var(--duration) var(--easing); }
.pd.is-playing .pd-zone-label { opacity: 0.55; transition: opacity var(--duration) var(--easing); }

/* Flow lines are hidden at rest (JS enhancement): only the flow currently being
   traced by the animation is revealed, so there is no static tangle of lines
   when nothing is running. Without JS the static SVG keeps every flow visible,
   and reduced-motion users get the full static diagram (see media query below). */
.js .pd-flow { opacity: 0; transition: opacity var(--duration) var(--easing); }
.js .pd-flow.is-active { opacity: 1; }

/* ----- moving pulses (motion path) ----- */
.pd-pulse {
  fill: var(--colour-cyan);
  stroke: #fff;
  stroke-width: 1.5;
  opacity: 0;
  offset-distance: 0%;
}
.pd-pulse.is-running {
  opacity: 1;
  animation: pd-move var(--pd-dur, 1.1s) linear forwards;
}
@keyframes pd-move {
  from { offset-distance: 0%; }
  to { offset-distance: 100%; }
}

/* ----- live caption ----- */
.pd-live {
  margin: 0;
  min-height: 1.5em;
  padding: var(--space-2xs) var(--space-sm);
  border-left: 3px solid var(--colour-cyan);
  background: var(--bg-subtle);
  border-radius: var(--radius-sm);
  font-weight: var(--fw-medium);
  color: var(--text-primary);
}
.pd-live:empty { display: none; }

/* ----- walk-through progress (JS enhancement) ----- */
.pd-progress { display: none; }
.js .pd-progress {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm);
  margin: 0;
}
.pd-progress__track {
  list-style: none;
  display: flex;
  gap: var(--space-2xs);
  margin: 0;
  padding: 0;
}
.pd-progress__pip {
  width: clamp(1.4rem, 0.9rem + 2vw, 2.25rem);
  height: 6px;
  border-radius: var(--radius-pill);
  background: var(--colour-neutral-light);
  transition: background var(--duration) var(--easing);
}
.pd-progress__pip.is-done { background: var(--colour-teal); }
.pd-progress__pip.is-active { background: var(--colour-cyan); }
.pd-progress__meta { margin: 0; font-size: var(--fs-small); }
.pd-progress__step { font-weight: var(--fw-semibold); color: var(--text-primary); }
.pd-progress__label { color: var(--text-secondary); }
.pd-progress__label:not(:empty)::before {
  content: "\00b7";
  margin: 0 0.45rem;
  color: var(--text-muted);
}

/* ----- controls (hidden until JS upgrades the component) ----- */
/* In-stage cassette-deck playback buttons, bottom-centre overlay. */
.pd-controls-overlay { display: none; }
.js .pd-controls-overlay {
  display: flex;
  justify-content: center;
  position: absolute;
  left: 50%;
  bottom: clamp(0.5rem, 0.25rem + 1vw, 1rem);
  transform: translateX(-50%);
  z-index: 2;
  pointer-events: none;
}
.pd-controls-buttons {
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
  padding: 0.4rem 0.55rem;
  background: color-mix(in srgb, var(--colour-navy) 88%, transparent);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  box-shadow: 0 6px 18px rgba(5, 6, 12, 0.35);
  pointer-events: auto;
}
.pd-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--max-touch);
  height: var(--max-touch);
  min-height: var(--max-touch);
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  cursor: pointer;
  transition: background var(--duration) var(--easing), border-color var(--duration) var(--easing), color var(--duration) var(--easing);
}
.pd-btn:hover { background: rgba(255, 255, 255, 0.22); }
.pd-btn[aria-pressed="true"] { background: var(--colour-cyan); color: var(--colour-navy); border-color: var(--colour-cyan); }
.pd-btn[disabled] { opacity: 0.45; cursor: not-allowed; }
.pd-ico { display: block; width: 20px; height: 20px; fill: currentColor; }

.pd-controls { display: none; }
.js .pd-controls {
  display: flex;
  justify-content: flex-end;
  margin-top: var(--space-2xs);
}
.pd-controls-speed { display: flex; align-items: center; gap: var(--space-2xs); font-size: var(--fs-small); }
.pd-controls-speed select {
  min-height: var(--max-touch);
  padding: 0.4rem 0.6rem;
  border: var(--border-default);
  border-radius: var(--radius-sm);
  background: var(--colour-cloud-white);
  font: inherit;
}

/* ----- persona chooser (segmented radio chips) ----- */
.pd-personas { display: none; }
.js .pd-personas { display: block; margin: var(--space-sm) 0 0; }
.pd-personas__field { margin: 0; padding: 0; border: 0; }
.pd-personas__legend {
  padding: 0;
  margin: 0 0 var(--space-2xs);
  font-size: var(--fs-small);
  font-weight: var(--fw-semibold);
  color: var(--text-secondary);
}
.pd-personas__options { display: flex; flex-wrap: wrap; gap: var(--space-2xs); }
.pd-persona-chip { display: inline-flex; }
.pd-persona-chip__input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.pd-persona-chip__label {
  display: inline-flex;
  align-items: center;
  min-height: var(--max-touch);
  padding: 0.4rem 0.85rem;
  border: var(--border-default);
  border-radius: var(--radius-sm);
  background: var(--colour-cloud-white);
  color: var(--text-primary);
  font-size: var(--fs-small);
  line-height: var(--lh-snug);
  cursor: pointer;
  transition: background var(--duration) var(--easing), border-color var(--duration) var(--easing);
}
.pd-persona-chip__input:hover + .pd-persona-chip__label { border-color: var(--colour-cyan); }
.pd-persona-chip__input:checked + .pd-persona-chip__label {
  background: var(--colour-navy);
  border-color: var(--colour-navy);
  color: var(--colour-cloud-white);
  font-weight: var(--fw-semibold);
}
.pd-persona-chip__input:focus + .pd-persona-chip__label {
  outline: 2px solid var(--colour-cyan);
  outline-offset: 2px;
}
.pd-persona-chip__input:focus:not(:focus-visible) + .pd-persona-chip__label { outline: none; }
.pd-persona-chip__input:focus-visible + .pd-persona-chip__label {
  outline: 2px solid var(--colour-cyan);
  outline-offset: 2px;
}

/* ----- per-persona journey panels (always rendered for no-JS fallback) ----- */
.pd-persona-panels { margin: var(--space-md) 0 0; }
.pd-persona-panel[hidden] { display: none; }
.pd-persona-panel {
  margin: 0;
  padding: var(--space-md);
  border-left: 4px solid var(--colour-cyan);
  border-radius: var(--radius-sm);
  background: var(--bg-subtle);
}
.pd-persona-panel__title { font-size: var(--fs-h4); margin: 0 0 var(--space-2xs); }
.pd-persona-panel__lead { margin: 0 0 var(--space-sm); color: var(--text-secondary); line-height: var(--lh-snug); }
.pd-persona-panel__cols { display: grid; gap: var(--space-md); grid-template-columns: 1fr; }
@media (min-width: 48rem) {
  .pd-persona-panel__cols { grid-template-columns: 1.3fr 1fr; }
}
.pd-persona-panel__subhead {
  font-size: var(--fs-small);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-secondary);
  margin: 0 0 var(--space-xs);
}
.pd-persona__steps { margin: 0; padding-left: 1.2rem; display: grid; gap: var(--space-2xs); }
.pd-persona__steps li { line-height: var(--lh-snug); transition: color var(--duration) var(--easing); }
.pd-persona__steps li.is-active { color: var(--text-primary); font-weight: var(--fw-semibold); }
.pd-persona__steps li.is-active::marker { color: var(--colour-cyan); }
.pd-persona__tech-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2xs); }
.pd-persona__tech-list li { line-height: var(--lh-snug); }
.pd-persona__market { margin: var(--space-sm) 0 0; font-size: var(--fs-small); }

/* ----- aside: process summary + legend key ----- */
.pd-aside {
  display: grid;
  gap: var(--space-lg);
  grid-template-columns: 1fr;
}
@media (min-width: 56rem) {
  .pd-aside { grid-template-columns: 1.3fr 1fr; }
}
.pd-subhead {
  font-size: var(--fs-h4);
  margin: 0 0 var(--space-xs);
}
.pd-process {
  margin: 0;
  padding-left: 1.2rem;
  display: grid;
  gap: var(--space-2xs);
  color: var(--text-secondary);
}
.pd-process li { line-height: var(--lh-snug); }
.pd-process li.is-active { color: var(--text-primary); font-weight: var(--fw-semibold); }

.pd-legend-key { margin: 0; display: grid; gap: var(--space-2xs); }
.pd-legend-key__item dt { display: flex; align-items: center; gap: var(--space-2xs); font-size: var(--fs-small); }
.pd-swatch { display: inline-block; width: 34px; height: 0; border-top-width: 3px; border-top-style: solid; flex: none; }
.pd-swatch--content { border-top-color: var(--colour-navy); border-top-width: 2px; }
.pd-swatch--fulfil { border-top-color: var(--colour-navy); border-top-style: dashed; border-top-width: 3px; }
.pd-swatch--order { border-top-color: var(--colour-enterprise-blue); border-top-width: 3px; }
.pd-swatch--data { border-top-color: var(--colour-enterprise-blue); border-top-style: dashed; border-top-width: 2px; }
.pd-swatch--job { border-top-color: var(--colour-cyan); border-top-width: 4px; }
.pd-swatch--rights { border-top-color: var(--colour-teal); border-top-style: dashed; border-top-width: 2px; }
.pd-swatch--ship { border-top-color: var(--colour-enterprise-blue); border-top-style: dashed; border-top-width: 3px; }
.pd-swatch--status { border-top-color: var(--colour-cyan); border-top-style: dotted; border-top-width: 3px; }
.pd-swatch--report { border-top-color: var(--colour-neutral-dark); border-top-style: dotted; border-top-width: 3px; }
.pd-note { font-size: var(--fs-small); color: var(--text-muted); margin: var(--space-xs) 0 0; }

/* ----- simplified vertical mobile process (shown only on small screens) ----- */
.pd-mobile-flow { display: none; }

@media (max-width: 47.99em) {
  /* Below ~768px the dense schematic becomes unreadable; show the vertical
     process instead, using the same content and identity. */
  .pd-stage { display: none; }
  .pd-mobile-flow {
    display: grid;
    gap: var(--space-2xs);
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: pd-step;
  }
  .pd-mobile-flow li {
    counter-increment: pd-step;
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-md);
    border: var(--border-default);
    border-left: 4px solid var(--colour-cyan);
    border-radius: var(--radius-md);
    background: var(--colour-cloud-white);
  }
  .pd-mobile-flow li::before {
    content: counter(pd-step);
    flex: none;
    width: 2rem;
    height: 2rem;
    display: grid;
    place-items: center;
    border-radius: var(--radius-pill);
    background: var(--colour-navy);
    color: #fff;
    font-weight: var(--fw-bold);
    font-size: var(--fs-small);
  }
  .pd-mobile-flow li:not(:last-child)::after {
    content: "";
    position: absolute;
    left: calc(var(--space-md) + 1rem);
    bottom: calc(-1 * var(--space-2xs));
    width: 2px;
    height: var(--space-2xs);
    background: var(--colour-neutral-mid);
  }
  .pd-mobile-flow__label { font-weight: var(--fw-medium); }
  /* On mobile the playback controls drive the textual process only. */
  .pd--platform .pd-controls { display: none; }
}

/* ==========================================================================
   Simplified overview schematic (/platform/) — a small, static, high-level
   vertical diagram. No animation, no JS hook; large labels; textual fallback.
   ========================================================================== */
.pos { margin: 0; display: grid; gap: var(--space-md); }
.pos-figcaption {
  font-size: var(--fs-h4);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  color: var(--text-primary);
}
.pos-stage {
  border: var(--border-hairline);
  border-radius: var(--radius-lg);
  background: var(--bg-subtle);
  padding: clamp(0.75rem, 0.4rem + 1.5vw, 1.5rem);
}
.pos-svg { display: block; width: 100%; height: auto; max-width: 38rem; margin-inline: auto; }
.pos-box { fill: var(--colour-cloud-white); stroke: var(--colour-neutral-dark); stroke-width: 1.6; }
.pos-box--core { fill: var(--colour-navy); stroke: var(--colour-navy); }
.pos-box--status { fill: color-mix(in srgb, var(--colour-teal) 12%, white); stroke: var(--colour-teal); stroke-width: 1.8; }
.pos-label { fill: var(--colour-ink); font-family: var(--font-sans); font-size: 21px; font-weight: var(--fw-semibold); }
.pos-label--core { fill: #fff; font-size: 23px; font-weight: var(--fw-bold); }
.pos-arrow { stroke: var(--colour-neutral-dark); stroke-width: 2.4; }
.pos-arrow-head { fill: var(--colour-neutral-dark); }
.pos-loop { fill: none; stroke: var(--colour-cyan); stroke-width: 2.4; stroke-dasharray: 7 5; }
.pos-loop-head { fill: var(--colour-cyan); }
.pos-loop-label { fill: var(--text-secondary); font-family: var(--font-sans); font-size: 14px; font-weight: var(--fw-semibold); letter-spacing: 0.03em; }
.pos-fallback { margin: 0; padding-left: 1.2rem; display: grid; gap: var(--space-2xs); color: var(--text-secondary); }
.pos-fallback li { line-height: var(--lh-snug); }

/* ----- hero variant: tighter, on a dark hero panel ----- */
.pd--hero { gap: var(--space-sm); }
.pd--hero .pd-figcaption { color: #fff; font-size: var(--fs-h3); }
.pd--hero .pd-stage { background: var(--colour-cloud-white); }
.pd--hero .pd-aside { display: none; }
.pd--hero .pd-controls-speed { display: none; }
.js .pd--hero .pd-controls { justify-content: flex-start; }
.pd--hero .pd-live { background: rgba(255, 255, 255, 0.08); color: var(--text-on-inverse); border-left-color: var(--colour-cyan); }
.pd--hero .pd-progress__step { color: #fff; }
.pd--hero .pd-progress__label { color: rgba(255, 255, 255, 0.82); }
.pd--hero .pd-btn { background: rgba(255, 255, 255, 0.1); color: #fff; border-color: rgba(255, 255, 255, 0.3); }
.pd--hero .pd-btn:hover { background: rgba(255, 255, 255, 0.2); }

/* ----- reduced motion: no particles, no auto-sequence; full static diagram ----- */
@media (prefers-reduced-motion: reduce) {
  .pd-pulse, .pd-pulse.is-running { animation: none; opacity: 0; }
  .pd.is-playing .pd-node { opacity: 1; }
  /* No animation to trace, so reveal the complete static diagram. */
  .js .pd-flow { opacity: 1; }
}