/* ============================================================
   Review layer — journey stepper + swimlane map + annotation +
   feedback CTA. Injected on top of the POC; uses the POC's theme
   tokens. Everything is prefixed .jr- so it never collides.
   ============================================================ */
:root { --jr-front: #ff5c8a; --jr-admin: #4fd08a; --jr-dl: #ffd166; --jr-aspa: #8b5cf6; }

/* bottom journey bar */
.jr-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
  background: color-mix(in srgb, #0c0a12 92%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid var(--line, rgba(255,255,255,.12)); box-shadow: 0 -8px 30px rgba(0,0,0,.5);
  display: flex; align-items: center; gap: 10px; padding: 8px 12px calc(8px + env(safe-area-inset-bottom)); }
html.mobile-mode .jr-bar { bottom: 64px; }   /* clear the app tab bar on mobile */
.jr-bar .jr-title { font-size: 11px; font-weight: 800; color: var(--muted, #c3b9d4); white-space: nowrap; display: flex; flex-direction: column; line-height: 1.25; }
.jr-bar .jr-title b { color: var(--txt, #f5f3f7); font-size: 12px; }
.jr-nodes { display: flex; gap: 4px; overflow-x: auto; flex: 1; padding: 2px; scrollbar-width: thin; }
.jr-node { flex: none; display: flex; flex-direction: column; align-items: center; gap: 2px; cursor: pointer;
  border: 1px solid var(--line, rgba(255,255,255,.14)); background: rgba(255,255,255,.03); border-radius: 10px;
  padding: 5px 8px; min-width: 52px; transition: .15s; font-family: inherit; }
.jr-node:hover { border-color: var(--txt, #fff); }
.jr-node .jn-id { font-size: 11px; font-weight: 900; font-variant-numeric: tabular-nums; }
.jr-node .jn-nm { font-size: 9.5px; color: var(--muted, #c3b9d4); white-space: nowrap; }
.jr-node.front .jn-id { color: var(--jr-front); } .jr-node.admin .jn-id { color: var(--jr-admin); }
.jr-node.on { background: var(--jr-front); border-color: var(--jr-front); }
.jr-node.on.admin { background: var(--jr-admin); border-color: var(--jr-admin); }
.jr-node.on .jn-id, .jr-node.on .jn-nm { color: #12101a; }
.jr-sep { width: 1px; align-self: stretch; background: var(--line, rgba(255,255,255,.18)); margin: 4px 2px; flex: none; }
.jr-actions { display: flex; gap: 6px; flex: none; }
.jr-btn { font-family: inherit; font-size: 12px; font-weight: 800; border-radius: 999px; padding: 8px 12px; cursor: pointer;
  border: 1px solid var(--line, rgba(255,255,255,.16)); background: rgba(255,255,255,.05); color: var(--txt, #f5f3f7); white-space: nowrap; }
.jr-btn:hover { border-color: var(--accent, #ff2d78); }
.jr-btn.on { background: var(--accent, #ff2d78); border-color: var(--accent, #ff2d78); color: #fff; }
.jr-btn.feedback { background: linear-gradient(135deg, #ff2d78, #8b5cf6); border: none; color: #fff; }
body.jr-active { padding-bottom: 70px; }

/* integration badges */
.jr-badge { display: inline-flex; align-items: center; gap: 4px; font-size: 10px; font-weight: 800; padding: 2px 7px;
  border-radius: 999px; letter-spacing: .3px; white-space: nowrap; }
.jr-badge.datalake { background: color-mix(in srgb, var(--jr-dl) 16%, transparent); color: var(--jr-dl); border: 1px solid color-mix(in srgb, var(--jr-dl) 45%, transparent); }
.jr-badge.aspa { background: color-mix(in srgb, var(--jr-aspa) 16%, transparent); color: color-mix(in srgb, var(--jr-aspa) 78%, #fff); border: 1px solid color-mix(in srgb, var(--jr-aspa) 55%, transparent); }

/* contextual annotation panel (top-right) */
.jr-annot { position: fixed; top: 70px; right: 14px; z-index: 68; width: 300px; max-width: calc(100vw - 28px);
  background: color-mix(in srgb, #1a1526 94%, transparent); border: 1px solid var(--line, rgba(255,255,255,.14)); border-radius: 14px;
  padding: 14px 16px; box-shadow: 0 20px 50px rgba(0,0,0,.55); font-size: 13px; max-height: 70vh; overflow: auto; }
.jr-annot h4 { font-size: 13px; font-weight: 900; margin: 0 0 4px; display: flex; align-items: center; gap: 6px; }
.jr-annot .jn-id { font-size: 11px; font-weight: 900; padding: 1px 7px; border-radius: 6px; background: var(--jr-front); color: #12101a; }
.jr-annot.admin .jn-id { background: var(--jr-admin); }
.jr-annot .role { color: var(--muted, #c3b9d4); font-size: 12px; margin-bottom: 10px; }
.jr-annot .lbl { font-size: 10.5px; text-transform: uppercase; letter-spacing: .5px; color: var(--dim, #8a7fa3); margin: 8px 0 4px; }
.jr-annot ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 5px; }
.jr-annot ul li { font-size: 11.5px; background: rgba(255,255,255,.06); border: 1px solid var(--line, rgba(255,255,255,.12)); border-radius: 7px; padding: 2px 8px; }
.jr-annot .integ { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; }
.jr-annot .integ .row { font-size: 11.5px; color: var(--muted, #c3b9d4); display: flex; gap: 6px; align-items: flex-start; }
.jr-annot .xlink { margin-top: 10px; font-size: 11.5px; }
.jr-annot .xlink a { color: var(--accent2, #8b5cf6); cursor: pointer; font-weight: 700; }

/* full-screen swimlane map overlay */
.jr-mapveil { position: fixed; inset: 0; z-index: 140; background: rgba(6,4,12,.86); backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center; padding: 20px; }
.jr-mapbox { width: 100%; max-width: 1080px; max-height: 88vh; overflow: auto; background: #120e1a; border: 1px solid var(--line, rgba(255,255,255,.14));
  border-radius: 18px; padding: 22px 24px; }
.jr-mapbox h2 { font-size: 19px; font-weight: 900; margin: 0 0 4px; }
.jr-mapbox .sub { color: var(--muted, #c3b9d4); font-size: 13px; margin-bottom: 16px; }
.jr-mapclose { position: absolute; top: 26px; right: 30px; z-index: 141; }
.jr-lane { margin-bottom: 18px; }
.jr-lane .lane-hd { font-size: 13px; font-weight: 900; margin-bottom: 8px; display: flex; align-items: center; gap: 8px; }
.jr-lane .lane-hd .dot { width: 10px; height: 10px; border-radius: 3px; }
.jr-lane.front .lane-hd .dot { background: var(--jr-front); } .jr-lane.admin .lane-hd .dot { background: var(--jr-admin); }
.jr-flow { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 6px; }
.jr-card { flex: none; width: 190px; background: #1a1526; border: 1px solid var(--line, rgba(255,255,255,.12)); border-radius: 12px; padding: 12px; cursor: pointer; transition: .15s; }
.jr-card:hover { border-color: var(--accent, #ff2d78); transform: translateY(-2px); }
.jr-card .ch { display: flex; align-items: center; gap: 7px; margin-bottom: 5px; }
.jr-card .ch .jn-id { font-size: 11px; font-weight: 900; padding: 1px 7px; border-radius: 6px; }
.jr-card.front .ch .jn-id { background: var(--jr-front); color: #12101a; } .jr-card.admin .ch .jn-id { background: var(--jr-admin); color: #12101a; }
.jr-card .ch b { font-size: 13.5px; }
.jr-card .role { font-size: 11px; color: var(--muted, #c3b9d4); margin-bottom: 7px; line-height: 1.4; }
.jr-card .feats { display: flex; flex-wrap: wrap; gap: 3px; }
.jr-card .feats span { font-size: 10px; background: rgba(255,255,255,.05); border-radius: 5px; padding: 1px 6px; color: var(--muted, #c3b9d4); }
.jr-card .cbadges { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 7px; }
.jr-card .xl { font-size: 10px; color: var(--jr-dl); margin-top: 6px; }
@media (max-width: 640px) { .jr-annot { display: none; } .jr-bar .jr-title { display: none; } }