/* rmc-workflow-guidance.css — Phase 3 of platform-wide workflow audit (v3.58.x).
 *
 * Visual grammar for the four workflow-guidance components shipped in Phase 3:
 *
 *   - .rmc-workflow-tag                — accessible tag chip (19-tag taxonomy)
 *   - .rmc-workflow-help               — sidebar/drawer panel
 *   - .rmc-workflow-next-action        — workflow-scoped primary/secondary/blocker
 *   - .rmc-workflow-status-strip       — current-step + completion + owner
 *
 * Loaded on control-plane skeleton (operator shell) + per-page workflow templates.
 *
 * Token contract:
 *   - All surfaces via var(--surface-bg/canvas/elevated/popover).
 *   - All text via var(--text-primary/secondary/tertiary/muted).
 *   - All hairlines via var(--hairline) / var(--hairline-strong).
 *   - All accents via var(--brand-gradient-start), var(--ds-success/warning/danger/info).
 *   - Spacing scale via var(--space-*); radii via var(--radius-*);
 *     motion via var(--ease-*) / var(--motion-*).
 *
 * Accessibility:
 *   - Tag chips emit role="status" + visible text label (color never the only signal).
 *   - Focus rings via var(--focus-ring) so keyboard nav matches platform-wide.
 *   - Min touch-target on interactive chips ≥ 44px (caller maintains height with
 *     padding tokens; min-height set here as a floor).
 *
 * Dark mode:
 *   - Tokens flip automatically via the design-tokens cascade. No `[data-theme="dark"]`
 *     rules are needed in this file — every selector consumes semantic variables only.
 *
 * Off-token markers:
 *   - rgba(0, 0, 0, 0.0X) shadow tints inside box-shadow are decorative elevation
 *     (Apple HIG soft-shadow recipe) and are platform-pattern in design-tokens.css.
 *     We carry /* off-token-allow: decorative-shadow */ on the affected rules so
 *     the scanner doesn't trip. (box-shadow is NOT one of the scanner's flagged
 *     declaration kinds, but adding the marker future-proofs the rule.)
 */

/* ============================================================ */
/* 0. .rmc-workflow-auto-chrome                                  */
/*    Wave D wrapper emitted by templates/components/            */
/*    _workflow_auto_chrome.html only when the auto-resolve      */
/*    bridge returns a visible workflow. Acts as a layout fence  */
/*    so the 3 component partials stack predictably. No visual    */
/*    chrome of its own — children own the look.                  */
/* ============================================================ */

.rmc-workflow-auto-chrome {
  display: flex;
  flex-direction: column;
  gap: var(--space-3, 0.75rem);
  margin-block: var(--space-3, 0.75rem);
}

.rmc-workflow-auto-chrome > * + * {
  margin-top: 0;
}

/* ============================================================ */
/* 1. .rmc-workflow-tag                                          */
/* ============================================================ */

.rmc-workflow-tag {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1, 0.25rem);
  padding: var(--space-1, 0.25rem) var(--space-2, 0.5rem);
  border-radius: var(--radius-pill, 9999px);
  border: 1px solid var(--hairline);
  background: var(--surface-elevated);
  color: var(--text-secondary);
  font-family: var(--font-family-sans, inherit);
  font-size: var(--type-size-xs, 0.75rem);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0.01em;
  min-block-size: 1.5rem;
  white-space: nowrap; /* horizontal-overflow-risk-allow: short-pill */
  vertical-align: middle;
  transition: background-color var(--motion-fast, 120ms) var(--ease-standard, ease),
              border-color var(--motion-fast, 120ms) var(--ease-standard, ease);
}

.rmc-workflow-tag__icon {
  display: inline-flex;
  font-size: var(--type-size-xs, 0.75rem);
  line-height: 1;
  color: var(--text-tertiary);
}

.rmc-workflow-tag__label {
  display: inline-block;
}

/* Tone variants — color is decorative; visible text label is the contract.
   The ink is the tone mixed into the theme ink: the raw hue on the tag's
   elevated surface read 2.53:1 for "Needs review" (#f0883e on #fff). */
.rmc-workflow-tag[data-rmc-workflow-tag-tone="info"] {
  border-color: var(--ds-info, var(--hairline));
  color: color-mix(in srgb, var(--ds-info, var(--text-secondary)) 60%, var(--text-primary));
}
.rmc-workflow-tag[data-rmc-workflow-tag-tone="success"] {
  border-color: var(--ds-success, var(--hairline));
  color: color-mix(in srgb, var(--ds-success, var(--text-secondary)) 60%, var(--text-primary));
}
.rmc-workflow-tag[data-rmc-workflow-tag-tone="warn"] {
  border-color: var(--ds-warning, var(--hairline));
  color: color-mix(in srgb, var(--ds-warning, var(--text-secondary)) 60%, var(--text-primary));
}
.rmc-workflow-tag[data-rmc-workflow-tag-tone="danger"] {
  border-color: var(--ds-danger, var(--hairline));
  color: color-mix(in srgb, var(--ds-danger, var(--text-secondary)) 60%, var(--text-primary));
}

/* Visual hints for specific taxonomy keys. Color is layered on top of the
 * text label, never replacing it. Selectors are intentionally low-specificity
 * so caller-supplied tone wins. */
.rmc-workflow-tag[data-rmc-workflow-tag="required"],
.rmc-workflow-tag[data-rmc-workflow-tag="blocks-launch"],
.rmc-workflow-tag[data-rmc-workflow-tag="not-reversible"] {
  font-weight: 600;
}
.rmc-workflow-tag[data-rmc-workflow-tag="draft"] {
  font-style: italic;
}
.rmc-workflow-tag[data-rmc-workflow-tag="published"],
.rmc-workflow-tag[data-rmc-workflow-tag="ready-to-launch"] {
  font-weight: 600;
}

/* ============================================================ */
/* 2. .rmc-workflow-help                                         */
/* ============================================================ */

.rmc-workflow-help {
  display: flex;
  flex-direction: column;
  gap: var(--space-4, 1rem);
  padding: var(--space-5, 1.25rem);
  border-radius: var(--radius-lg, 0.75rem);
  border: 1px solid var(--hairline);
  background: var(--surface-elevated);
  color: var(--text-primary);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04); /* off-token-allow: decorative-shadow */
}

.rmc-workflow-help__head {
  display: flex;
  flex-direction: column;
  gap: var(--space-1, 0.25rem);
  border-bottom: 1px solid var(--hairline);
  padding-bottom: var(--space-3, 0.75rem);
}

.rmc-workflow-help__title {
  margin: 0;
  font-size: var(--type-size-md, 1rem);
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.3;
}

.rmc-workflow-help__subtitle {
  margin: 0;
  font-size: var(--type-size-sm, 0.875rem);
  color: var(--text-secondary);
}

.rmc-workflow-help__section {
  display: flex;
  flex-direction: column;
  gap: var(--space-2, 0.5rem);
}

.rmc-workflow-help__section-title {
  margin: 0;
  font-size: var(--type-size-sm, 0.875rem);
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.rmc-workflow-help__list {
  margin: 0;
  padding-inline-start: var(--space-5, 1.25rem);
  font-size: var(--type-size-sm, 0.875rem);
  color: var(--text-primary);
  line-height: 1.5;
}
.rmc-workflow-help__list > li + li {
  margin-block-start: var(--space-1, 0.25rem);
}
.rmc-workflow-help__list--checks {
  list-style: none;
  padding-inline-start: 0;
}
.rmc-workflow-help__list--checks > li {
  position: relative;
  padding-inline-start: var(--space-5, 1.25rem);
}
.rmc-workflow-help__list--checks > li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0.45em;
  inline-size: 0.5rem;
  block-size: 0.5rem;
  border-radius: 50%;
  background: var(--ds-success, var(--text-tertiary));
}
.rmc-workflow-help__list--blockers {
  list-style: none;
  padding-inline-start: 0;
}
.rmc-workflow-help__list--blockers > li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2, 0.5rem);
  padding-block: var(--space-1, 0.25rem);
}

.rmc-workflow-help__blocker-label {
  flex: 1 1 auto;
  color: var(--text-primary);
}

.rmc-workflow-help__blocker-fix {
  font-size: var(--type-size-xs, 0.75rem);
  font-weight: 600;
  color: var(--brand-primary, var(--text-primary));
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color var(--motion-fast, 120ms) var(--ease-standard, ease);
}
.rmc-workflow-help__blocker-fix:hover,
.rmc-workflow-help__blocker-fix:focus-visible {
  border-bottom-color: currentColor;
}

.rmc-workflow-help__foot {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3, 0.75rem);
  padding-block-start: var(--space-3, 0.75rem);
  border-block-start: 1px solid var(--hairline);
}

/* "Watch the N-second video" line under the title; the link inside truncates. */
.rmc-workflow-help__video {
  min-width: 0;
  max-width: 100%;
}

.rmc-workflow-help__support-link,
.rmc-workflow-help__ai-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1, 0.25rem);
  padding: var(--space-2, 0.5rem) var(--space-3, 0.75rem);
  border-radius: var(--radius-md, 0.5rem);
  border: 1px solid var(--hairline);
  background: var(--surface-canvas);
  color: var(--text-primary);
  font-size: var(--type-size-sm, 0.875rem);
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--motion-fast, 120ms) var(--ease-standard, ease);
}
.rmc-workflow-help__support-link:hover,
.rmc-workflow-help__support-link:focus-visible,
.rmc-workflow-help__ai-link:hover,
.rmc-workflow-help__ai-link:focus-visible {
  background: var(--surface-popover);
}

/* ============================================================ */
/* 3. .rmc-workflow-next-action                                  */
/* ============================================================ */

.rmc-workflow-next-action {
  display: block;
  padding: var(--space-4, 1rem);
  border-radius: var(--radius-lg, 0.75rem);
  border: 1px solid var(--hairline);
  background: var(--surface-elevated);
  color: var(--text-primary);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04); /* off-token-allow: decorative-shadow */
}

.rmc-workflow-next-action__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-3, 0.75rem);
}

.rmc-workflow-next-action__heading {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-2, 0.5rem);
}

.rmc-workflow-next-action__kicker {
  font-size: var(--type-size-xs, 0.75rem);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-tertiary);
}

.rmc-workflow-next-action__owner {
  font-size: var(--type-size-xs, 0.75rem);
  font-weight: 500;
  color: var(--text-secondary);
  padding: var(--space-1, 0.25rem) var(--space-2, 0.5rem);
  border-radius: var(--radius-pill, 9999px);
  background: var(--surface-canvas);
  border: 1px solid var(--hairline);
}

.rmc-workflow-next-action__blocker {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2, 0.5rem);
  padding: var(--space-3, 0.75rem);
  border-radius: var(--radius-md, 0.5rem);
  border: 1px solid var(--hairline);
  background: var(--surface-canvas);
  color: var(--text-primary);
}
.rmc-workflow-next-action__blocker[data-rmc-workflow-blocker-tone="warn"] {
  border-color: var(--ds-warning, var(--hairline));
}
.rmc-workflow-next-action__blocker[data-rmc-workflow-blocker-tone="danger"] {
  border-color: var(--ds-danger, var(--hairline));
}
.rmc-workflow-next-action__blocker[data-rmc-workflow-blocker-tone="info"] {
  border-color: var(--ds-info, var(--hairline));
}

.rmc-workflow-next-action__blocker-label {
  flex: 1 1 auto;
  font-size: var(--type-size-sm, 0.875rem);
  font-weight: 500;
  color: var(--text-primary);
}

.rmc-workflow-next-action__blocker-fix {
  font-size: var(--type-size-xs, 0.75rem);
  font-weight: 600;
  color: var(--brand-primary, var(--text-primary));
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.rmc-workflow-next-action__blocker-fix:hover,
.rmc-workflow-next-action__blocker-fix:focus-visible {
  border-bottom-color: currentColor;
}

.rmc-workflow-next-action__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2, 0.5rem);
}

.rmc-workflow-next-action__chip {
  display: inline-flex;
  flex-direction: column;
  gap: var(--space-1, 0.25rem);
  padding: var(--space-2, 0.5rem) var(--space-3, 0.75rem);
  border-radius: var(--radius-md, 0.5rem);
  border: 1px solid var(--hairline);
  background: var(--surface-canvas);
  color: var(--text-primary);
  font-size: var(--type-size-sm, 0.875rem);
  text-decoration: none;
  min-block-size: 2.75rem;
  transition: background-color var(--motion-fast, 120ms) var(--ease-standard, ease),
              border-color var(--motion-fast, 120ms) var(--ease-standard, ease);
}
.rmc-workflow-next-action__chip--primary {
  background: var(--brand-gradient, var(--surface-elevated));
  border-color: transparent;
  color: var(--text-on-brand, #ffffff); /* off-token-allow: brand-gradient-foreground-fallback */
  font-weight: 600;
}
.rmc-workflow-next-action__chip--primary:hover,
.rmc-workflow-next-action__chip--primary:focus-visible {
  filter: brightness(1.04);
}
.rmc-workflow-next-action__chip--secondary {
  background: var(--surface-canvas);
}
.rmc-workflow-next-action__chip--secondary:hover,
.rmc-workflow-next-action__chip--secondary:focus-visible {
  background: var(--surface-popover);
}
.rmc-workflow-next-action__chip[aria-disabled="true"] {
  opacity: 0.55;
  pointer-events: none;
}

.rmc-workflow-next-action__chip-title {
  font-weight: 600;
  line-height: 1.2;
}
.rmc-workflow-next-action__chip-desc {
  font-size: var(--type-size-xs, 0.75rem);
  font-weight: 400;
  color: var(--text-secondary);
}
.rmc-workflow-next-action__chip--primary .rmc-workflow-next-action__chip-desc {
  color: inherit;
  opacity: 0.85;
}

/* ============================================================ */
/* 4. .rmc-workflow-status-strip                                 */
/* ============================================================ */

.rmc-workflow-status-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3, 0.75rem);
  padding: var(--space-3, 0.75rem) var(--space-4, 1rem);
  border-radius: var(--radius-md, 0.5rem);
  border: 1px solid var(--hairline);
  background: var(--surface-elevated);
  color: var(--text-primary);
}

.rmc-workflow-status-strip__title-block {
  display: flex;
  flex-direction: column;
  gap: var(--space-1, 0.25rem);
  flex: 1 1 auto;
  min-inline-size: 0;
}

.rmc-workflow-status-strip__title {
  font-size: var(--type-size-sm, 0.875rem);
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.2;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.rmc-workflow-status-strip__step {
  font-size: var(--type-size-xs, 0.75rem);
  color: var(--text-secondary);
  line-height: 1.3;
}

.rmc-workflow-status-strip__meta {
  display: flex;
  align-items: center;
  gap: var(--space-2, 0.5rem);
}

.rmc-workflow-status-strip__completion {
  display: inline-flex;
  align-items: center;
  padding: var(--space-1, 0.25rem) var(--space-2, 0.5rem);
  border-radius: var(--radius-pill, 9999px);
  border: 1px solid var(--hairline);
  background: var(--surface-canvas);
  color: var(--text-secondary);
  font-size: var(--type-size-xs, 0.75rem);
  font-weight: 600;
  white-space: nowrap; /* horizontal-overflow-risk-allow: short-pill */
}
.rmc-workflow-status-strip__completion[data-rmc-workflow-completion-pill="complete"] {
  border-color: var(--ds-success, var(--hairline));
  color: color-mix(in srgb, var(--ds-success, var(--text-secondary)) 60%, var(--text-primary));
}
.rmc-workflow-status-strip__completion[data-rmc-workflow-completion-pill="blocked"] {
  border-color: var(--ds-danger, var(--hairline));
  color: color-mix(in srgb, var(--ds-danger, var(--text-secondary)) 60%, var(--text-primary));
}
.rmc-workflow-status-strip__completion[data-rmc-workflow-completion-pill="in-progress"] {
  border-color: var(--ds-info, var(--hairline));
  color: color-mix(in srgb, var(--ds-info, var(--text-secondary)) 60%, var(--text-primary));
}

.rmc-workflow-status-strip__owner {
  display: inline-flex;
  padding: var(--space-1, 0.25rem) var(--space-2, 0.5rem);
  border-radius: var(--radius-pill, 9999px);
  border: 1px solid var(--hairline);
  background: var(--surface-canvas);
  color: var(--text-secondary);
  font-size: var(--type-size-xs, 0.75rem);
  font-weight: 500;
  white-space: nowrap; /* horizontal-overflow-risk-allow: short-pill */
}

.rmc-workflow-status-strip__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1, 0.25rem);
}

/* ============================================================ */
/* Reduced motion: respect prefers-reduced-motion                */
/* ============================================================ */

@media (prefers-reduced-motion: reduce) {
  .rmc-workflow-tag,
  .rmc-workflow-help__blocker-fix,
  .rmc-workflow-help__support-link,
  .rmc-workflow-help__ai-link,
  .rmc-workflow-next-action__chip,
  .rmc-workflow-next-action__chip--primary {
    transition: none;
  }
}

/* ============================================================ */
/* Focus rings: platform-wide focus contract                     */
/* ============================================================ */

.rmc-workflow-help__blocker-fix:focus-visible,
.rmc-workflow-help__support-link:focus-visible,
.rmc-workflow-help__ai-link:focus-visible,
.rmc-workflow-next-action__chip:focus-visible,
.rmc-workflow-next-action__blocker-fix:focus-visible {
  outline: 2px solid var(--focus-ring, var(--brand-primary, currentColor));
  outline-offset: 2px;
}


/* Core vs Context — compact help (collapsed How-it-works) */
.rmc-workflow-help--compact {
  padding: 0.75rem 0.85rem;
}
.rmc-workflow-help__details {
  margin-top: 0.5rem;
  border: 1px solid var(--hairline);
  border-radius: 10px;
  background: var(--surface-canvas);
  min-width: 0;
}
.rmc-workflow-help__summary {
  cursor: pointer;
  list-style: none;
  padding: 0.55rem 0.7rem;
  font-size: 0.78rem;
  font-weight: 750;
  color: var(--text-primary);
}
.rmc-workflow-help__summary::-webkit-details-marker { display: none; }
.rmc-workflow-help__details-body {
  padding: 0 0.7rem 0.7rem;
  border-top: 1px solid var(--hairline);
}
.rmc-workflow-help__title {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  flex-wrap: wrap;
  max-width: 100%;
}
.rmc-help-details summary {
  cursor: pointer;
  list-style: none;
}
.rmc-help-details summary::-webkit-details-marker { display: none; }
.rmc-wcx-hero--compact .rmc-wcx-hero__copy { display: none !important; }
.rmc-wcx-hero__main--flex,
.rmc-wcx-section-header__copy {
  min-width: 0;
  flex: 1 1 auto;
}
.rmc-wcx-hero__title {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  flex-wrap: wrap;
  max-width: 100%;
}
.rmc-wcx-visual-panel--compact {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.55rem 0.7rem;
}
.rmc-wcx-visual-panel--compact .rmc-wcx-visual-panel__title {
  font-size: 0.8rem;
}
.rmc-wcx-section-header--compact p { display: none !important; }
.rmc-operational-center-frame [data-rmc-os-center-purpose] { display: none !important; }
.proof-panel > summary.proof-panel-title {
  cursor: pointer;
  list-style: none;
}
.proof-panel > summary.proof-panel-title::-webkit-details-marker { display: none; }