/* Integration Map block (acf/integration-map). Geometry lives in the SVG;
   this file handles layout, buttons, popover, mobile timeline and the panel. */
.im { --im-blue: #2A70EA; --im-ink: #1E3A8A; --im-soft: #D4E8FF; --im-bg: #F7FBFF; }
.im [hidden] { display: none !important; }

.im-intro { text-align: center; padding-top: 80px; margin-bottom: 40px; }
.im-intro p { margin: 0; }

/* The diagram sits in a centred canvas card (faint dot grid), not a full-bleed band. */
.im-stage {
  position: relative; box-sizing: border-box; max-width: 1180px; margin: 0 auto; padding: 32px 32px 40px;
  background-color: var(--im-bg);
  background-image: radial-gradient(rgba(42, 112, 234, .09) 1px, transparent 1px);
  background-size: 20px 20px;
  border: 1px solid #DCE8FA; border-radius: 16px;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 12px 32px rgba(42, 112, 234, .06);
}
/* Title row and status share the chart's 1080px column so everything lines up. */
.im-head, .im #status { max-width: 1080px; margin-left: auto; margin-right: auto; }
.im-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 24px; }
.im-title { margin: 0; color: #0072F1; font-size: 28px; font-weight: 600; }
.im-powered { font-size: 13px; font-weight: 400; color: #6C757D; margin-left: 8px; }
.im-powered b { color: #0066CC; font-weight: 500; }
.im-actions { display: flex; gap: 12px; }
.im-action { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border: 1px solid #D1D5DB; border-radius: 6px; background: #fff; color: #4B5563; font-size: 14px; cursor: pointer; }
.im-action:hover { background: #F9FAFB; border-color: #9CA3AF; }
/* The moved share code sets className = 'status success|error', so key off .status */
.im #status { text-align: right; font-size: 14px; }
.im #status.success { color: #15803D; }
.im #status.error { color: #B91C1C; }

/* Desktop map */
.im-map { position: relative; width: 100%; max-width: 1080px; margin: 0 auto; }
.im-map-svg { display: block; width: 100%; height: 100%; overflow: visible; }
.im-station-btn {
  position: absolute; width: calc(40 / 1080 * 100%); aspect-ratio: 1; transform: translate(-50%, -50%);
  padding: 0; border: 0; border-radius: 10px; background: transparent; cursor: pointer;
}
/* Outer ring marks swappable stations; static stations (no button) stay plain. */
.im-station-btn::before {
  content: ""; position: absolute; inset: -6px; border: 1.5px solid rgba(42, 112, 234, .45); border-radius: 15px;
  transition: inset .18s ease, border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}
.im-station-btn:hover::before, .im-station-btn:focus-visible::before, .im-station-btn[aria-expanded="true"]::before {
  inset: -8px; border-color: var(--im-blue); background-color: rgba(42, 112, 234, .08);
  box-shadow: 0 4px 14px rgba(42, 112, 234, .25);
}
.im-station-btn:focus-visible { outline: none; }

/* Energy: blue dashes march along a soft track toward Publishing. The lines keep a solid-blue
   stroke attribute, so reduced motion and the snapshot PNG (which ignores page CSS) stay solid.
   JS adds .im-flowing while the map is on screen. */
@keyframes im-flow { to { stroke-dashoffset: -26; } }
@keyframes im-flow-down { to { background-position: 0 26px; } }
@media (prefers-reduced-motion: no-preference) {
  .im .im-line { stroke: #BFD6F7; }
  .im-current-line { animation: im-flow 1.1s linear infinite paused; }
  .im.im-flowing .im-current-line { animation-play-state: running; }
}
@media (prefers-reduced-motion: reduce) { .im-current { display: none; } }

/* Popover */
.im-popover { position: absolute; z-index: 30; min-width: 210px; padding: 6px; background: #fff; border-radius: 12px; box-shadow: 0 8px 32px rgba(0, 0, 0, .14); }
.im-option { display: flex; align-items: center; gap: 12px; width: 100%; padding: 9px 12px; border: 0; border-radius: 8px; background: none; color: #334155; font-size: 15px; text-align: left; cursor: pointer; }
.im-option:hover, .im-option:focus-visible { outline: none; background: #F1F5F9; }
.im-option[aria-selected="true"] { background: #E2E8F0; font-weight: 600; }
.im-option-tile { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 7px; flex: none; }

/* Mobile timeline */
.im-timeline { display: none; }
@media (max-width: 899px) {
  .im-intro { padding-top: 48px; }
  .im-stage { padding: 24px 16px 28px; }
  .im-title { font-size: 22px; }
  .im-actions { width: 100%; }
  .im-action { flex: 1; justify-content: center; }
  .im-map { display: none; }
  .im-timeline { display: block; position: relative; list-style: none; margin: 0; padding: 0; }
  .im-timeline::before { content: ""; position: absolute; left: 18.5px; top: 20px; bottom: 20px; width: 3px; border-radius: 2px; background: var(--im-blue); }
  .im-tl-item { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin: 0 0 18px; }
  .im-tl-item:last-child { margin-bottom: 0; }
  .im-tl-tile { position: relative; z-index: 1; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; border: 2.5px solid var(--im-blue); border-radius: 10px; cursor: pointer; flex: none; }
  .im-tl-tile:not(.im-tl-static) { box-shadow: 0 0 0 3px #fff, 0 0 0 4.5px rgba(42, 112, 234, .45); }
  .im-tl-tile[aria-expanded="true"], .im-tl-tile:focus-visible { outline: none; box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--im-blue), 0 4px 14px rgba(42, 112, 234, .25); }
  .im-tl-static { cursor: default; }
  .im-tl-label { color: var(--im-ink); font-size: 15px; font-weight: 600; }
  .im-tl-pick { display: block; color: #64748B; font-size: 13px; font-weight: 500; }
  .im-tl-branches { flex-basis: 100%; list-style: none; margin: 18px 0 0 36px; padding: 0; }
  .im-tl-branches .im-tl-item::before { content: ""; position: absolute; left: -18px; top: 50%; width: 18px; height: 3px; background: var(--im-blue); }
}
@media (max-width: 899px) and (prefers-reduced-motion: no-preference) {
  .im-timeline::before { background: repeating-linear-gradient(to bottom, var(--im-blue) 0 10px, #BFD6F7 10px 26px); animation: im-flow-down 1.1s linear infinite paused; }
  .im.im-flowing .im-timeline::before { animation-play-state: running; }
}

/* Work Your Way panel */
.im-work { display: flex; align-items: flex-start; gap: 80px; max-width: 1180px; margin: 0 auto; padding: 50px 0; }
.im-work-left { flex: 1; max-width: 450px; }
.im-work-heading { margin: 0 0 24px; color: #000; font-family: var(--font-display); font-size: 48px; font-weight: 600; line-height: 1.2; }
.im-work-desc { margin: 0 0 24px; color: #333; font-size: 16px; line-height: 1.6; }
.im-save { padding: 0; border: 0; background: none; color: #0066FF; font-size: 16px; font-weight: 500; cursor: pointer; }
.im-save:hover { text-decoration: underline; }
/* Adapters and default text share one grid cell; the inactive one is only made invisible,
   so the panel always keeps the height of the taller adapters list. */
.im-work-right { flex: 1; display: grid; padding: 20px; border-radius: 6px; background: #F2F8FE; }
.im-work-right > * { grid-area: 1 / 1; }
.im .im-work-right > [hidden] { display: block !important; visibility: hidden; }
.im-adapters-title { margin: 0 0 20px; color: #000; font-size: 14px; font-weight: 600; }
.im-adapter-list { display: flex; flex-direction: column; gap: 16px; margin: 0; padding: 0; list-style: none; }
.im-adapter { display: flex; align-items: center; gap: 12px; }
.im-adapter-tile { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border: 1.5px solid; border-radius: 7px; flex: none; }
.im-adapter-copy { flex: 1; color: #333; font-size: 15px; }
.im-tour { color: #0066FF; font-size: 14px; font-weight: 500; white-space: nowrap; text-decoration: none; }
.im-default-text { align-self: center; margin: 0; color: var(--im-blue); text-align: center; font-family: "VC Garamond Condensed", "ITC Garamond Condensed", Garamond, serif; font-size: 34px; font-style: normal; font-weight: 300; line-height: 1.15; }
@media (max-width: 899px) {
  .im-work { flex-direction: column; gap: 32px; padding: 40px 0; }
  .im-work-heading { font-size: 36px; }
  .im-work-right { width: 100%; box-sizing: border-box; }
  .im-default-text { font-size: 28px; }
}