/* binly.org lavender: small diagrams used by a few guides (shutdown timeline, stocktake stepper, dead stock signals,
   reorder formula, export flow, how-to steps, barcode bars). Loaded after lavender.css, only on pages that use them. */

/* shutdown timeline */
.lv .viz-timeline-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;padding:6px 4px 12px}
.lv .viz-timeline{display:flex;min-width:620px;position:relative;padding:0 8px}
.lv .viz-stop{flex:1;position:relative;text-align:center;padding:0 14px}
.lv .viz-stop::before{content:'';position:absolute;top:23px;left:0;right:0;height:3px;background:#dccdea;z-index:0}
.lv .viz-stop:first-child::before{left:50%}
.lv .viz-stop:last-child::before{right:50%}
.lv .viz-node{width:48px;height:48px;border-radius:50%;background:#fff;border:3px solid #8058b5;color:#654195;display:flex;align-items:center;justify-content:center;margin:0 auto 14px;position:relative;z-index:1;box-shadow:0 8px 20px -6px #73509659}
.lv .viz-stop--final .viz-node{background:linear-gradient(135deg,#e5a43c,#c7791a);color:#fff;border-color:#c7791a;box-shadow:0 8px 20px -6px #c7791a66}
.lv .viz-stop--now .viz-node{background:#291d38;border-color:#291d38;color:#fff}
.lv .viz-label{font-family:var(--display);font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:#7d5a99;margin-bottom:4px}
.lv .viz-stop--final .viz-label{color:#9a5a0b}
.lv .viz-stop--now .viz-label{color:var(--ink)}
.lv .viz-sub{font-size:16px;font-weight:650;color:var(--ink)}

/* stocktake stepper and variance strip */
.lv .viz-stepper-wrap,.lv .viz-flow-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;padding:6px 2px 14px}
.lv .viz-stepper{display:flex;align-items:flex-start;gap:0;min-width:780px}
.lv .viz-step{flex:0 0 auto;width:150px;text-align:center;padding:0 4px}
.lv .viz-step-circle,.lv .viz-flow-circle{position:relative;width:54px;height:54px;border-radius:50%;background:linear-gradient(135deg,#9772c2,#7951aa);display:flex;align-items:center;justify-content:center;margin:0 auto 14px;box-shadow:0 8px 20px -6px #7350965c}
.lv .viz-step-num{position:absolute;top:-6px;right:-6px;width:24px;height:24px;border-radius:50%;background:#fff;border:2px solid #654195;color:#654195;font-size:12px;font-weight:800;font-family:var(--display);display:flex;align-items:center;justify-content:center}
.lv .viz-step-title{font-size:15px;font-weight:650;color:var(--ink);line-height:1.4}
.lv .viz-arrow,.lv .viz-flow-arrow{flex:0 0 auto;width:30px;height:54px;display:flex;align-items:center;justify-content:center}
.lv .viz-variance-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin-top:36px;padding:4px 2px 10px}
.lv .viz-variance{display:flex;align-items:center;gap:10px;min-width:720px;color:#cdb9df}
.lv .viz-vcard{flex:0 0 auto;background:#fff;border:1px solid var(--line);border-radius:12px;padding:14px 20px;text-align:center;box-shadow:var(--shadow-soft)}
.lv .viz-vcard-label{display:block;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:#7d5a99;margin-bottom:6px}
.lv .viz-vcard-num{display:block;font-family:var(--display);font-size:28px;font-weight:700;color:var(--ink);letter-spacing:-.04em}
.lv .viz-varrow{flex:0 0 auto;display:flex}
.lv .viz-vbadge{flex:0 0 auto;display:flex;align-items:center;gap:8px;padding:12px 18px;border-radius:999px;font-size:15px;font-weight:700;white-space:nowrap}
.lv .viz-vbadge-bad{background:#fdf1f3;border:1px solid #f1c6cf;color:#a8324a}
.lv .viz-vbadge-good{background:#efe5f7;border:1px solid #dccaec;color:#4b2d7a}
.lv .viz-compare{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;margin-top:34px}
.lv .viz-ccard{background:#fff;border:1px solid var(--line);border-radius:16px;padding:26px 26px 24px;box-shadow:var(--shadow-soft)}
.lv .viz-cicon,.lv .viz-legend-icon{width:46px;height:46px;border-radius:13px;background:#f2eafa;border:1px solid #e6d9f1;display:flex;align-items:center;justify-content:center;margin-bottom:14px}
.lv .viz-ctitle{font-family:var(--display);font-size:18px;font-weight:650;letter-spacing:-.02em;color:var(--ink);margin-bottom:8px}
.lv .viz-cdesc{font-size:16px;color:var(--muted);line-height:1.6;margin-bottom:16px}
.lv .viz-cvisual{display:block;margin-top:4px}
@media (max-width:700px){.lv .viz-compare{grid-template-columns:1fr}}

/* dead stock: signals, chart, cash card */
.lv .viz-signals{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin:44px 0 0}
.lv .viz-signal-card{background:#fff;border:1px solid var(--line);border-top:3px solid #d9962b;border-radius:14px;padding:24px 22px;box-shadow:var(--shadow-soft);transition:transform .45s var(--ease),box-shadow .4s}
.lv .viz-signal-card--danger{border-top-color:#c2354a}
.lv .viz-signal-icon{width:46px;height:46px;border-radius:13px;background:#fbf4e6;color:#b97614;display:flex;align-items:center;justify-content:center;margin-bottom:14px}
.lv .viz-signal-card--danger .viz-signal-icon{background:#fdf1f3;color:#c2354a}
.lv .viz-signal-title{font-family:var(--display);font-size:17px;font-weight:650;color:var(--ink);margin:0 0 8px;letter-spacing:-.02em}
.lv .viz-signal-meaning{font-size:16px;color:var(--muted);margin:0;line-height:1.55}
.lv .viz-chart-card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:26px 24px 22px;box-shadow:var(--shadow-soft);margin-top:36px}
.lv .viz-chart-eyebrow{font-family:var(--display);font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:#7d5a99;margin:0 0 16px}
.lv .viz-chart-wrap{overflow-x:auto}
.lv .viz-chart-wrap svg{display:block;min-width:640px}
.lv .viz-chart-legend{display:flex;gap:18px;flex-wrap:wrap;justify-content:center;margin-top:16px;font-size:14.5px;color:var(--plum-text)}
.lv .viz-legend-item{display:inline-flex;align-items:center;gap:6px}
.lv .viz-legend-dot{width:10px;height:10px;border-radius:50%;display:inline-block}
.lv .viz-legend-dot--green{background:#8058b5}
.lv .viz-legend-dot--amber{background:#d9962b}
.lv .viz-legend-dot--red{background:#c2354a}
.lv .viz-chart-caption{text-align:center;font-size:14.5px;color:var(--muted);margin-top:12px}
.lv .viz-cash{display:flex;align-items:center;gap:28px;background:#fff;border:1px solid var(--line);border-radius:16px;padding:26px 28px;box-shadow:var(--shadow-soft);margin:36px 0 0;flex-wrap:wrap}
.lv .viz-cash-figure{flex:0 0 auto}
.lv .viz-cash-copy{flex:1 1 260px;min-width:220px}
.lv .viz-cash-headline{font-family:var(--display);font-size:18px;font-weight:650;color:var(--ink);margin:0 0 6px;letter-spacing:-.02em}
.lv .viz-cash-sub{font-size:16px;color:var(--muted);margin:0;line-height:1.55}
@media (max-width:900px){.lv .viz-signals{grid-template-columns:1fr}}
@media (max-width:560px){.lv .viz-cash{flex-direction:column;text-align:center}.lv .viz-cash-copy{min-width:0}}
@media (hover:hover) and (pointer:fine){.lv .viz-signal-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-hi)}}

/* reorder points: legend, formula */
.lv .viz-legend{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;max-width:940px;margin:0 auto 40px}
.lv .viz-legend>.viz-legend-item{display:block;background:#fff;border:1px solid var(--line);border-radius:14px;padding:22px 20px;text-align:center;box-shadow:var(--shadow-soft)}
.lv .viz-legend-icon{margin:0 auto 12px}
.lv .viz-legend-label{font-family:var(--display);font-size:16px;font-weight:650;color:var(--ink);margin-bottom:4px;letter-spacing:-.015em}
.lv .viz-legend-value{font-size:15px;color:var(--muted);line-height:1.5}
.lv .viz-formula{max-width:940px;margin:0 auto 8px;text-align:center}
.lv .viz-formula-row{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:14px}
.lv .viz-formula-row+.viz-formula-row{margin-top:16px}
.lv .viz-box{background:#fff;border:1.5px solid #e4daeb;border-radius:14px;padding:16px 20px;min-width:130px;box-shadow:var(--shadow-soft)}
.lv .viz-box-label{font-size:15px;font-weight:650;color:var(--ink)}
.lv .viz-box-result{background:linear-gradient(135deg,#f3eafa,#e7d9f2);border-color:#cfb5e5}
.lv .viz-op{font-size:24px;font-weight:700;color:#654195;flex-shrink:0}
.lv .viz-box-value{border-color:#dccaec;background:var(--lav-soft);padding:12px 20px;min-width:100px}
.lv .viz-box-num{font-family:var(--display);font-size:28px;font-weight:700;color:var(--ink);letter-spacing:-.04em}
.lv .viz-box-value.viz-box-result .viz-box-num{color:#4b2d7a}
.lv .viz-formula-caption{font-size:15px;color:var(--muted);margin-top:18px}
@media (max-width:700px){.lv .viz-legend{grid-template-columns:1fr}.lv .viz-formula-row{flex-direction:column;gap:10px}.lv .viz-box{min-width:0;width:100%;max-width:280px}}

/* export flow and how-to steps */
.lv .viz-flow{display:flex;align-items:flex-start;gap:0;min-width:660px}
.lv .viz-flow-step{flex:0 0 auto;width:172px;text-align:center;padding:0 4px}
.lv .viz-flow-title{font-size:15px;font-weight:650;color:var(--ink);line-height:1.4;margin-bottom:4px}
.lv .viz-flow-desc{font-size:14.5px;color:var(--muted);line-height:1.5}
.lv .howto-list{display:flex;flex-direction:column;gap:32px}
.lv .howto-step{display:flex;gap:22px;align-items:flex-start}
.lv .howto-num{width:46px;height:46px;border-radius:50%;background:linear-gradient(135deg,#9772c2,#7951aa);color:#fff;font-family:var(--display);font-weight:700;font-size:18px;display:flex;align-items:center;justify-content:center;flex-shrink:0;box-shadow:0 8px 20px -6px #7350965c}
.lv .howto-body{flex:1;min-width:0}
.lv .howto-body h3{font-size:21px;margin-bottom:8px}
.lv .howto-body p{font-size:16.5px;color:var(--muted);line-height:1.65;margin-bottom:12px}
.lv .howto-path{background:var(--lav-soft);border:1px solid #e4daeb;border-radius:12px;padding:13px 17px;font-size:15px;color:var(--plum-text);font-family:var(--mono);line-height:1.7;overflow-wrap:anywhere}
.lv .howto-path strong{color:#4b2d7a}
@media (max-width:600px){.lv .howto-step{flex-direction:column;gap:14px}}
@media (max-width:520px){.lv .viz-step{width:128px}.lv .viz-flow-step{width:140px}}

/* barcode bars (labels page) */
.lv .barcode-bars{display:flex;align-items:flex-end;gap:2px;height:60px;margin:18px 0 10px;padding:14px 12px;background:#fff;border:1px solid #e9e2ef;border-radius:10px}
.lv .barcode-bars span{display:block;height:100%;background:#291d38}
.lv .barcode-num{text-align:center;font-family:var(--mono);font-size:14px;letter-spacing:3px;color:var(--plum-text)}