/* flow/flow.css — guided-order extras, copied to out/css/flow.css by bin/build
 * ONLY when the client descriptor sets `flow` (otherwise this file does not
 * ship and the output is unchanged). The navbar and the fixed bottom bar
 * (.feedback-bar: contact line, always visible) are fixed chrome on every
 * page; the flow touches only the bar's ACTION slot:
 *   - steps 1..n-1: the "Następny krok: <nazwa> →" link of the current step
 *     (.flow-bar-next[data-flow-from]) replaces the send button;
 *   - the last step (questionnaire): "Wyślij odpowiedź" and the answer counter.
 * body[data-route] is stamped by bin/build and kept in sync by js/router.js.
 * Body padding = bar height on every step is kept in sync by js/flow.js
 * (--flow-bar-h); the css/feedback.css values remain the no-JS fallback.
 */
.flow-bar-next { white-space: normal; text-align: center; max-width: 100%; display: none; }
.flow-bar-next__arrow { position: relative; z-index: 1; color: #fff; margin-left: 6px; transition: transform .25s var(--ease-out); }
.flow-bar-next:hover .flow-bar-next__arrow, .flow-bar-next:focus-visible .flow-bar-next__arrow { transform: translateX(4px); }
body[data-route="legenda"] .flow-bar-next[data-flow-from="legenda"],
body[data-route="inspiracje"] .flow-bar-next[data-flow-from="inspiracje"],
body[data-route="propozycja"] .flow-bar-next[data-flow-from="propozycja"],
body[data-route="spojnosc"] .flow-bar-next[data-flow-from="spojnosc"] { display: inline-flex; }

/* the send button and the answer counter belong to the questionnaire only */
body:not([data-route="kwestionariusz"]) #feedback-send,
body:not([data-route="kwestionariusz"]) .feedback-bar__count { display: none; }
.feedback-bar__actions { min-width: 0; }

/* body padding tracks the measured bar height (js/flow.js) so the bar never covers the page end */
body, body[data-route="legenda"] { padding-bottom: var(--flow-bar-h, 76px); }
@media (max-width: 600px) { body, body[data-route="legenda"] { padding-bottom: var(--flow-bar-h, 104px); } }

/* the embedded proposal fills the viewport above the bar */
/* `body` raises specificity: the embed page's own inline <style> (after this sheet) sets height:100svh */
body .proposal-embed { height: calc(100vh - var(--flow-bar-h, 76px)); height: calc(100svh - var(--flow-bar-h, 76px)); }

/* step 1 (Legenda): reads like Inspiracje - heading, then the sample's sections at their natural height, the OUTER page
   scrolls. css/legenda.css locks .legend-page to the viewport and lets the sample scroll inside the iframe; with a flow
   the page is auto-height and js/flow.js sizes the iframe to the sample's own height. */
.legend-page { height: auto; min-height: 0; display: block; }
.legend-frame-wrap { display: block; min-height: 0; }
.legend-frame { display: block; flex: none; min-height: 320px; height: 320px; overflow: hidden; }

@media (max-width: 600px) {
  .feedback-bar__actions { width: 100%; justify-content: center; }
  .flow-bar-next, #feedback-send { width: 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .flow-bar-next__arrow { transition: none; }
}