/* Falco Wholesale · flow diagrams and guide pages (console Help screen, phone apps, online shop).
   Every colour reads the page's own tokens: the phone apps' (--fw-primary, --fw-card…) first,
   then the console's (--primary, --card…), then a plain fallback. (The phone apps come first
   because Frappe's website CSS defines its own --primary.) so one stylesheet serves both
   and follows light and dark mode. */
.hf-scroll { overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; border-radius: 12px; border: 1px solid var(--fw-border, var(--border, #e5e7eb)); background: var(--fw-card, var(--card, #fff)); padding: 10px; }
.hf-scroll:focus-visible { outline: 2px solid var(--fw-primary, var(--primary, #0AB39C)); outline-offset: 2px; }
.hf-svg { display: block; max-width: none; font-family: inherit; }
.hf-lane { fill: var(--fw-subtle, var(--subtle-bg, #f8f9fa)); }
.hf-lane.odd { fill: transparent; }
.hf-lane-label { fill: var(--fw-muted, var(--muted, #6b7280)); font-size: 12px; font-weight: 600; letter-spacing: .01em; }
.hf-edge { fill: none; stroke: var(--fw-border-strong, var(--border-strong, #c9ced4)); stroke-width: 1.6; }
.hf-edge.opt { stroke-dasharray: 5 4; }
.hf-arrowhead { fill: var(--fw-border-strong, var(--border-strong, #c9ced4)); }
.hf-node .hf-box { fill: var(--fw-card, var(--card, #fff)); stroke: var(--fw-border-strong, var(--border-strong, #d4d8dd)); stroke-width: 1.2; transition: stroke .15s ease, filter .15s ease; }
.hf-node.opt .hf-box { stroke-dasharray: 5 4; }
.hf-node { cursor: pointer; outline: none; }
.hf-node:hover .hf-box, .hf-node:focus-visible .hf-box { stroke: var(--fw-primary, var(--primary, #0AB39C)); stroke-width: 2; filter: drop-shadow(0 3px 8px rgba(0, 0, 0, .10)); }
.hf-node.current .hf-box { stroke: var(--fw-primary, var(--primary, #0AB39C)); stroke-width: 2.4; }
.hf-num { fill: #fff; font-size: 11px; font-weight: 700; }
.hf-title { fill: var(--fw-heading, var(--heading, #212529)); font-size: 12.5px; font-weight: 600; }
.hf-sub { fill: var(--fw-muted, var(--muted, #6b7280)); font-size: 10.5px; }
.hf-sub.cond { font-style: italic; }
.hf-hint { font-size: 12px; color: var(--fw-muted, var(--muted, #6b7280)); margin: 6px 2px 0; display: flex; gap: 6px; align-items: center; }

/* ---- the step-by-step list under a diagram ---- */
.hf-steps { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; counter-reset: hf; }
.hf-step { display: grid; grid-template-columns: 34px 1fr; gap: 12px; padding: 14px 16px; border-radius: 12px; border: 1px solid var(--fw-border, var(--border, #e5e7eb)); background: var(--fw-card, var(--card, #fff)); transition: border-color .15s ease, box-shadow .15s ease; scroll-margin-top: 90px; }
.hf-step.on { border-color: var(--fw-primary, var(--primary, #0AB39C)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--fw-primary, var(--primary, #0AB39C)) 16%, transparent); }
.hf-step .n { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-weight: 700; font-size: 13px; }
.hf-step .who { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 600; padding: 2px 8px; border-radius: 99px; background: var(--fw-subtle, var(--subtle-bg, #f3f4f6)); color: var(--fw-text, var(--text, #374151)); }
.hf-step h4 { margin: 4px 0 4px; font-size: 14.5px; color: var(--fw-heading, var(--heading, #212529)); }
.hf-step .opt { font-size: 11.5px; color: var(--fw-warning, var(--warning-text, #b7791f)); font-weight: 600;
  /* the console's .opt is an option card (grid, border, padding): not here */
  display: inline; padding: 0; border: 0; border-radius: 0; background: none; cursor: auto; margin-left: 4px; }
.hf-step p { margin: 0; line-height: 1.5; }
.hf-step .res { margin-top: 6px; display: flex; gap: 6px; color: var(--fw-text, var(--text, #374151)); }
.hf-step .res i { color: var(--success, var(--fw-primary, var(--primary, #0AB39C))); }
.hf-step .go { margin-top: 10px; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.hf-step .where { font-size: 12px; color: var(--fw-muted, var(--muted, #6b7280)); }
.hf-notes { margin-top: 16px; padding: 14px 16px; border-radius: 12px; background: color-mix(in srgb, var(--fw-info, var(--info, #299CDB)) 10%, transparent); }
.hf-notes b { display: block; margin-bottom: 4px; }
.hf-notes ul { margin: 0; padding-left: 18px; }

/* ---- the big picture: stages left to right, wrapping on small screens ---- */
.hf-over { display: grid; grid-template-columns: repeat(auto-fit, minmax(138px, 1fr)); gap: 10px; }
.hf-over .st { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 14px 12px; border-radius: 12px; border: 1px solid var(--fw-border, var(--border, #e5e7eb)); background: var(--fw-card, var(--card, #fff)); cursor: pointer; text-align: left; font: inherit; color: inherit; transition: border-color .15s ease, transform .1s ease; }
.hf-over .st:hover { border-color: var(--fw-primary, var(--primary, #0AB39C)); transform: translateY(-1px); }
.hf-over .st i.ic { font-size: 22px; color: var(--fw-primary, var(--primary, #0AB39C)); }
.hf-over .st b { color: var(--fw-heading, var(--heading, #212529)); font-size: 13.5px; }
.hf-over .st small { color: var(--fw-muted, var(--muted, #6b7280)); font-size: 12px; line-height: 1.35; }
.hf-over .st .k { position: absolute; top: 10px; right: 12px; font-size: 11px; font-weight: 700; color: var(--fw-muted, var(--muted, #9ca3af)); }
.hf-over .st .alt { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.hf-over .st .alt span { font-size: 11px; padding: 1px 7px; border-radius: 99px; background: var(--fw-subtle, var(--subtle-bg, #f3f4f6)); }

/* ---- guide cards ---- */
.hf-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; }
.hf-card { display: flex; flex-direction: column; gap: 8px; padding: 16px; border-radius: 12px; border: 1px solid var(--fw-border, var(--border, #e5e7eb)); background: var(--fw-card, var(--card, #fff)); cursor: pointer; text-align: left; font: inherit; color: inherit; transition: border-color .15s ease, box-shadow .15s ease; }
.hf-card:hover, .hf-card:focus-visible { border-color: var(--fw-primary, var(--primary, #0AB39C)); box-shadow: 0 4px 14px rgba(0, 0, 0, .06); outline: none; }
.hf-card .top { display: flex; gap: 10px; align-items: center; }
.hf-card .top i { font-size: 20px; width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; background: color-mix(in srgb, var(--fw-primary, var(--primary, #0AB39C)) 14%, transparent); color: var(--fw-primary, var(--primary, #0AB39C)); }
.hf-card b { color: var(--fw-heading, var(--heading, #212529)); font-size: 14.5px; }
.hf-card p { margin: 0; font-size: 13px; line-height: 1.45; color: var(--fw-text, var(--text, #495057)); }
.hf-card .lanes { display: flex; flex-wrap: wrap; gap: 4px; margin-top: auto; }
.hf-card .lanes span { font-size: 11px; padding: 1px 7px; border-radius: 99px; background: var(--fw-subtle, var(--subtle-bg, #f3f4f6)); color: var(--fw-text, var(--text, #495057)); }
.hf-card .when { font-size: 11.5px; color: var(--fw-muted, var(--muted, #6b7280)); }

@media print {
  .hf-scroll { overflow: visible; border: 0; padding: 0; }
  .hf-step { break-inside: avoid; }
}