/* FullFlow sample job + quick walkthrough (assets/fullflow/walkthrough.js): demo mode and the demo company only */
.ffw-bar{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:4px 0 16px;padding:10px 12px;border:1.5px dashed var(--accent,#f2a71b);border-radius:12px;background:#fffaf0}
.ffw-tag{font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:#7a4b00;background:#fde9c4;border-radius:999px;padding:2px 10px}
.ffw-said{flex-basis:100%;margin:2px 0 0;font-size:14px;color:#5b4a2a}
/* The guide card never covers what it describes: walkthrough.js place() picks the spot from the target's rect and sets
   top (and left when beside); the classes say which spot. Without a target it sits where these defaults put it.
   The scroll margins carry the safe areas so place() can read them in px (.planning/phases/04-estimator-phone-fixes/04-UI-SPEC.md s11). */
.ffw-guide{position:fixed;right:16px;bottom:calc(var(--ff-nav-h,90px) + 16px + env(safe-area-inset-bottom));z-index:55;width:min(360px,calc(100vw - 32px));
  display:flex;flex-direction:column;max-height:calc(100dvh - 32px);box-sizing:border-box;
  scroll-margin-top:env(safe-area-inset-top,0px);scroll-margin-bottom:env(safe-area-inset-bottom,0px);
  background:#fff;color:#16202a;border:1px solid #d6dce3;border-top:4px solid var(--brand,#0b5c8a);border-radius:14px;padding:12px 16px;box-shadow:0 18px 44px -18px rgba(16,24,40,.45)}
.ffw-guide[hidden]{display:none}
/* wider screens: pinned to the page next to its target (place() writes page coordinates), so it scrolls with it. Under
   the sticky chrome (the Back / Continue bar is z-index 5, the visit's top bar 30), so a card scrolled past them slides
   beneath them instead of covering them */
.ffw-guide.ffw-anchored{position:absolute;z-index:4}
.ffw-guide > *{flex:0 0 auto}
.ffw-count{margin:0 40px 4px 0;font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:#5f6b78}
.ffw-h{margin:0 40px 8px 0;font-size:18px;line-height:1.25}
/* the text scrolls inside a short card; the heading and Back / Next stay put */
.ffw-guide > .ffw-text{flex:0 1 auto;min-height:3em;overflow-y:auto;overscroll-behavior:contain;margin:0 0 8px;font-size:15px;line-height:1.45;color:#2b3640}
.ffw-note{margin:0 0 8px;font-size:14px;color:#14532d;background:#ecfdf3;border-radius:8px;padding:8px}
.ffw-note[hidden],.ffw-act[hidden]{display:none}
.ffw-act{margin:0 0 8px;align-self:flex-start}
.ffw-row{display:flex;justify-content:flex-end;gap:8px}
.ffw-x{position:absolute;top:4px;right:4px;width:44px;height:44px;display:grid;place-items:center;padding:0;border:0;background:transparent;color:#5f6b78;cursor:pointer;border-radius:10px}
.ffw-x svg{width:20px;height:20px;stroke:currentColor;stroke-width:2.25;stroke-linecap:round;fill:none}
.ffw-x:focus-visible{background:#eef1f4;color:#16202a;outline:3px solid #1d232b;outline-offset:-3px}
@media (hover:hover){.ffw-x:hover{background:#eef1f4;color:#16202a}}
body.ffs-open .ffw-guide{right:auto;left:68px}
/* phones, and phones on their side: a bottom sheet above the Back / Continue bar, the target scrolled into the space
   above it; at most 40% of the screen tall, the text scrolling inside */
.ffw-guide.ffw-sheet,body.ffs-open .ffw-guide.ffw-sheet{left:calc(16px + env(safe-area-inset-left));right:calc(16px + env(safe-area-inset-right));width:auto;max-height:40dvh}
@media (max-width:640px){.ffw-guide,body.ffs-open .ffw-guide{left:16px;right:16px;width:auto}.ffw-guide > .ffw-text{font-size:14px}}
/* short landscape: the heading and Back / Next share the space with the text, so the text keeps a few lines */
@media (max-height:500px){.ffw-guide.ffw-sheet{display:grid;grid-template-columns:1fr auto;grid-template-rows:auto auto minmax(0,1fr) auto;column-gap:16px;padding:8px 16px}
  .ffw-sheet > .ffw-count{margin-right:0}
  .ffw-sheet > .ffw-count,.ffw-sheet > .ffw-h,.ffw-sheet > .ffw-text,.ffw-sheet > .ffw-note{grid-column:1}
  .ffw-sheet > .ffw-act,.ffw-sheet > .ffw-row{grid-column:2;align-self:end}
  .ffw-sheet > .ffw-act{grid-row:1 / span 2;align-self:start;margin:40px 0 0}
  .ffw-sheet > .ffw-row{grid-row:3 / span 2;margin:0 0 8px}
  .ffw-sheet > .ffw-h{margin-bottom:4px;font-size:17px}
  .ffw-sheet > .ffw-text{min-height:0;font-size:14px}}
@media print{.ffw-bar,.ffw-guide{display:none}}