/* Cloudstore Central — Rosetta RIP Integration page.
   Styles the accessible production-flow figure (.rr-flow). The figure is plain
   semantic HTML (an ordered list of steps grouped by zone) so assistive
   technology reads the flow in order; zones are distinguished by a text label
   as well as colour, and the return path is stated in text. No JavaScript. */

.rr-flow {
  margin: var(--space-lg) 0 0;
  padding: var(--space-md);
  border: var(--border-hairline);
  border-radius: var(--radius-lg);
  background: var(--bg-subtle);
}

.rr-flow__cap {
  margin: 0 0 var(--space-md);
  font-size: var(--fs-small);
  color: var(--text-muted);
}

.rr-flow__steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-sm);
}

.rr-step {
  position: relative;
  padding: var(--space-sm) var(--space-md);
  background: var(--bg-page);
  border: var(--border-hairline);
  border-left: 4px solid var(--border-colour);
  border-radius: var(--radius-md);
}

/* Zone colour coding (paired with the visible .rr-step__zone text label). */
.rr-step--cloud { border-left-color: var(--colour-blue-dark); }
.rr-step--site  { border-left-color: var(--colour-teal); }
.rr-step--prod  { border-left-color: var(--colour-cyan); }

.rr-step__zone {
  display: inline-block;
  margin-bottom: 4px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}

.rr-step__label {
  display: block;
  font-weight: 600;
  color: var(--text-primary);
}

.rr-step__note {
  display: block;
  margin-top: 2px;
  color: var(--text-secondary);
}

/* Connector between consecutive steps (decorative; hidden from AT). */
.rr-step + .rr-step::before {
  content: "";
  position: absolute;
  top: calc(-1 * var(--space-sm) - 1px);
  left: 24px;
  height: var(--space-sm);
  width: 2px;
  background: var(--border-colour-subtle);
}

.rr-flow__return {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2xs);
  margin: var(--space-md) 0 0;
  padding: var(--space-sm) var(--space-md);
  border: 1px dashed var(--colour-cyan);
  border-radius: var(--radius-md);
  background: var(--bg-page);
  color: var(--text-secondary);
}

.rr-flow__return-icon {
  flex: 0 0 auto;
  color: var(--colour-teal);
}

.rr-flow__return-icon .icon {
  width: 20px;
  height: 20px;
  transform: rotate(180deg);
}

/* On wider viewports, give the flow a comfortable reading width and lay the
   three zones out as a stepped progression. Single column keeps the reading
   order unambiguous, so we simply cap the width and centre it. */
@media (min-width: 48rem) {
  .rr-flow__steps { gap: var(--space-md); }
  .rr-step + .rr-step::before { top: calc(-1 * var(--space-md) - 1px); height: var(--space-md); }
}