/* Onboarding portal — first-party overlay on SLDS 2 Cosmos. Only the non-SLDS chrome rules adapted
   from docs/mocks/onboarding/assets/flow.css: brand bar, page-header band, the Path complete-stage
   flip override, and the card-grid helpers. SLDS 2 provides everything else (grid, cards, buttons,
   spacing, the Path structure itself). Colours are the mock's brand hex, lifted off inline style=
   attributes into classes so the markup carries no inline styles. */

body { background: #f4f7f9; }
#app { min-height: 100vh; }

/* brand bar */
.flow-topbar { background: #fff; border-bottom: 1px solid #e2e8ec; }
.flow-topbar-inner {
  padding: .7rem 1.2rem;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.flow-brand { display: inline-flex; align-items: center; gap: .55rem; font-weight: 700; color: #032d60; }
.home-user { display: inline-flex; align-items: center; gap: .5rem; font-size: .85rem; color: #32404d; font-weight: 600; }
.home-avatar {
  width: 26px; height: 26px; border-radius: 50%; background: #0176d3; color: #fff;
  font-size: .68rem; font-weight: 800; display: inline-flex; align-items: center; justify-content: center;
}

/* page shell + header band */
.home-shell { max-width: 1120px; margin: 0 auto; padding-inline: 1.2rem; }
.home-headwrap { background: #fff; border-bottom: 1px solid #e2e8ec; padding: 1.3rem 0 1rem; }
.home-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; flex-wrap: wrap; }
.home-head-actions { display: flex; gap: .6rem; flex-wrap: wrap; }
.home-title { color: #032d60; }
.home-meta { color: #5a6b7b; margin-top: .2rem; }

/* six-stage Path — sizing plus the Cosmos complete-stage flip override (transform off, tick prefix) */
.home-path { margin-top: 1rem; }
.home-path .slds-path__item { flex: 1 1 auto; min-width: max-content; }
.home-path .slds-path__title { white-space: nowrap; font-size: .8rem; }
.home-path .slds-path__link { padding-inline: .6rem .45rem; }
.home-path .slds-is-complete .slds-path__title { transform: none; }
.home-path .slds-is-complete .slds-path__title::before { content: "✓ "; }

/* next-step banner */
.home-next { border-left: 3px solid #0176d3; }
.home-next-inner { display: flex; justify-content: space-between; align-items: center; gap: 1.2rem; flex-wrap: wrap; }
.home-next-inner > div { flex: 1; min-width: 260px; }

/* card list helpers */
.flow-facts { list-style: none; margin: .8rem 0 0; padding: 0; font-size: .88rem; }
.flow-facts li { display: flex; gap: .5rem; padding: .4rem 0; border-bottom: 1px solid #eef3f6; }
.flow-facts li:last-child { border-bottom: none; }
.flow-facts .k { min-width: 9.5rem; color: #5a6b7b; font-size: .8rem; padding-top: .1rem; }
.flow-hint { font-size: .78rem; color: #5a6b7b; margin-top: .25rem; }
.flow-ok { color: #2e844a; font-weight: 700; }

/* chrome-less auth/notice state (boot renders this when GET /me can't authenticate) */
.portal-notice-wrap { padding-block: 3rem; }
.portal-notice { max-width: 34rem; margin: 0 auto; }

.slds-button { min-height: 44px; }
:focus-visible { outline: 3px solid #7fb2e5; outline-offset: 2px; }

/* primary CTA + cta row + muted inline text (welcome Continue, home next-step banner) — from mock flow.css */
.flow-big { padding-inline: 1.6rem; font-size: .95rem; }
.flow-cta-row { display: flex; align-items: center; gap: .9rem; margin-top: 1.5rem; flex-wrap: wrap; }
.quiet { font-size: .8rem; color: #5a6b7b; }

/* scope screen — platform picker tiles (ported from mock flow.css; the per-tile logo <img> is dropped
   since /catalogue/platforms carries no logo and the portal ships no binary assets, so the initial-
   glyph badge always shows) and the inline save-error line */
.flow-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: .7rem; margin-top: .6rem; }
.flow-tile {
  display: flex; align-items: center; gap: .6rem; padding: .65rem .8rem; cursor: pointer;
  border: 1.5px solid #dbe4ea; border-radius: 10px; background: #fff; font-size: .88rem; font-weight: 600;
  color: #32404d; min-height: 48px; text-align: left; width: 100%;
}
.flow-tile .init {
  width: 24px; height: 24px; border-radius: 6px; background: #eef3f6; color: #0176d3;
  display: inline-flex; align-items: center; justify-content: center; font-size: .8rem; font-weight: 800; flex: none;
}
.flow-tile[aria-pressed="true"] { border-color: #0176d3; background: #f0f7fd; box-shadow: inset 0 0 0 1px #0176d3; }
.flow-tile[aria-pressed="true"]::after { content: "✓"; margin-left: auto; color: #0176d3; font-weight: 800; }
.flow-error { color: #ba0517; font-size: .82rem; font-weight: 600; margin-top: .8rem; }

/* scope screen — checkbox rows (both groups: "currently import" + "flow into Salesforce"). SLDS lays the
   faux box and its label text as adjacent inline boxes with no gap, so the text sits hard against the box;
   nudge the label off the box and give the stacked rows a little vertical rhythm. 0.5rem matches the SLDS
   spacing idiom. Scoped to the scope groups' data-group control so no other checkbox is affected. */
.slds-form-element__control[data-group] .slds-checkbox { padding-block: .3rem; }
.slds-form-element__control[data-group] .slds-checkbox__label .slds-form-element__label { margin-left: .5rem; }

/* connected screen — MetaDeploy-style stepped scan execution list (ported from mock flow.css; the
   progress-row and count layout the mock carried inline are lifted into classes here). The step badges
   (Complete/Running/Queued) are SLDS themes; these rules are the non-SLDS row + result-line chrome. */
.scan-progress { display: flex; align-items: center; gap: .8rem; margin: .2rem 0 .9rem; }
.scan-progress .slds-progress-bar { flex: 1; }
.scan-count { white-space: nowrap; margin-top: 0; }
.scan-step { display: grid; grid-template-columns: 6.6rem 1fr; gap: .8rem; padding: .6rem 0; border-bottom: 1px solid #eef3f6; align-items: start; }
.scan-step:last-of-type { border-bottom: none; }
.scan-step .s { font-weight: 700; font-size: .88rem; color: #32404d; }
.scan-step .r { font-size: .8rem; color: #5a6b7b; margin-top: .1rem; }
.scan-step.running { background: #f7fafd; border-radius: 8px; padding-inline: .5rem; margin-inline: -.5rem; }
.scan-step.running .s { color: #032d60; }
.scan-step.skipped .s { color: #5a6b7b; }
.scan-reconnect { margin-top: .8rem; }
.scan-failure { border-left: 3px solid #ba0517; }

/* scan-report screen (spec 3.1) — beyond SLDS + the shared overlay above, the report needs only the light
   note box used for the coverage caveats and the re-scan diff (incl. the amber org-changed banner). The
   meta panel, findings panels and Existing patterns card are all SLDS 2 cards + the shared flow-facts
   list. The headline tiles and the green "feeds the walkthrough" chip are no longer rendered (item 5), so
   their rules (.report-tiles/.report-tile-* and .flow-prefill) are gone with them. Ported from the mock's
   flow.css. */

/* light note box — coverage caveats + the re-scan diff / org-changed banner (mock flow.css .flow-note) */
.flow-note { background: #f7fafb; border: 1px solid #e2e8ec; border-radius: 10px; padding: .75rem .9rem; font-size: .82rem; color: #32404d; margin-top: 1rem; }
.flow-note.warn { background: #fdf6e8; border-color: #f0deb6; }