/* /inventory-forecasting only. Builds on css/price-testing.css (same tokens and components); see README. */

/* Hero */
.fc-hero h1 { font-size: clamp(2.6rem, 5.4vw, 4.8rem); line-height: .96; letter-spacing: -.065em; }
.fc-hero-grid { align-items: start; }
.fc-points { list-style: none; margin: 0 0 30px; padding: 0; display: grid; gap: 10px; font-size: 1.02rem; color: var(--body); }
.fc-points li { display: flex; align-items: center; gap: 12px; }
.fc-points strong { color: var(--ink); }
.fc-point-icon { flex: 0 0 auto; width: 28px; height: 28px; border-radius: 50%; background: var(--ink); color: #fff; display: inline-grid; place-items: center; font-size: .8rem; font-weight: 900; }
.fc-points li:first-child .fc-point-icon { background: var(--brand); }
.fc-demo { padding-bottom: 0; }
.fc-demo .walk { position: relative; z-index: 2; }
/* The receipt hangs under the walkthrough in normal flow, so it never covers the caption. */
.fc-demo .pt-receipt-float { position: relative; left: auto; bottom: auto; width: 300px; max-width: 88%; margin: -8px 24px 0 auto; transform: rotate(2deg); }
.fc-demo .fc-demo-note { position: relative; z-index: 2; display: table; margin: 18px 0 0 auto; background: #fff; border: 1px solid var(--line); border-radius: 100px; padding: 4px 12px; font-size: .75rem; color: var(--body); }
.fc-total-ink strong { color: var(--ink); }

/* What runs out (dark) */
.fc-runout { position: relative; padding: clamp(72px,10vw,120px) 0; background: var(--ink); color: #fff; overflow: hidden; }
.fc-runout .pt-eyebrow { color: #d9d6d4; }
.fc-runout .pt-display span { color: #d9d6d4; }
.fc-runout .pt-aside { color: #bdb9b7; }
.fc-runout-grid { display: flex; flex-wrap: wrap; gap: clamp(32px,5vw,56px); align-items: center; }
.fc-runway { flex: 1 1 340px; max-width: 460px; min-width: 0; background: #fff; color: var(--ink); border-radius: 16px; padding: 20px 22px 16px; box-shadow: 0 24px 60px #00000040; transform: rotate(-1.2deg); }
.fc-runway-head { display: flex; justify-content: space-between; border-bottom: 1.5px dashed #d6d6d4; padding-bottom: 10px; font-size: .68rem; font-weight: 800; letter-spacing: .14em; }
.fc-runway-head span:first-child { color: var(--bad); }
.fc-runway-head span:last-child { color: var(--muted); letter-spacing: .06em; }
.fc-runway-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name order" "bar bar" "days days"; gap: 6px 14px; padding: 14px 0; border-bottom: 1px solid #efecea; font-variant-numeric: tabular-nums; }
.fc-runway-name { grid-area: name; font-size: .78rem; color: var(--muted); min-width: 0; }
.fc-runway-name strong { display: block; font-size: .95rem; color: var(--ink); }
.fc-runway-bar { grid-area: bar; height: 8px; border-radius: 4px; background: #e3e3e3; overflow: hidden; }
.fc-runway-fill { display: block; height: 100%; border-radius: 4px; background: var(--bad); }
/* Days left out of 21, the scale the app's bars use. */
.fc-fill-13 { width: 61.9%; }
.fc-fill-12 { width: 57.1%; }
.fc-fill-18 { width: 85.7%; }
.fc-runway-days { grid-area: days; font-size: .78rem; color: var(--muted); }
.fc-runway-days strong { color: #8e0b21; margin-right: 6px; }
.fc-runway-order { grid-area: order; align-self: start; text-align: right; font-weight: 800; font-size: .95rem; white-space: nowrap; }
.fc-runway-order span { display: block; font-size: .78rem; font-weight: 600; color: var(--muted); }
.fc-runway-foot { font-size: .78rem; color: var(--muted); padding-top: 12px; }
.fc-runout .pt-row-demo { flex: 2 1 440px; }
.fc-block-dark::before { background: #ffffff14; }
@media (prefers-reduced-motion: no-preference) {
  /* Bars wait at zero until the card scrolls into view (js/inventory-forecasting.js adds .is-in). Without JS they stay full. */
  .is-enhanced .fc-runway .fc-runway-fill { transform: scaleX(0); transform-origin: left; }
  .is-enhanced .fc-runway.is-in .fc-runway-fill { animation: fc-grow 1.2s .2s var(--ease-cam) both; }
  .is-enhanced .fc-runway.is-in .fc-runway-row:nth-of-type(3) .fc-runway-fill { animation-delay: .35s; }
  .is-enhanced .fc-runway.is-in .fc-runway-row:nth-of-type(4) .fc-runway-fill { animation-delay: .5s; }
}
@keyframes fc-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* The math */
.fc-slider { padding-top: 26px; }
.fc-slider .pt-breakeven { font-size: .68rem; }
.fc-mark-suggested { left: 25%; }
.fc-mark-naive { left: 90%; transform: translateX(-100%); }
.fc-mark-naive::after { left: auto; right: 0; }
.fc-math .pt-slider-label output { white-space: nowrap; }
.fc-stack-head { display: flex; justify-content: space-between; font-size: .8rem; color: var(--muted); margin-bottom: 8px; }
.fc-stack { position: relative; display: flex; height: 22px; border-radius: 6px; background: #e3e3e3; margin-bottom: 10px; }
.fc-stack-have { width: 46.43%; background: #8a8a8a; border-radius: 6px 0 0 6px; }
.fc-stack-order { width: 13.39%; background: #303030; transition: width .3s ease; }
.fc-stack-need { position: absolute; left: 58.71%; top: -5px; bottom: -5px; width: 2px; background: var(--bad); }
.fc-stack-key { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: .72rem; color: var(--muted); margin-bottom: 4px; }
.fc-stack-key span { display: inline-flex; align-items: center; gap: 6px; }
.fc-stack-key i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; }
.fc-key-have { background: #8a8a8a; }
.fc-key-order { background: #303030; }
.fc-key-need { width: 2px !important; height: 12px !important; background: var(--bad); }
.fc-calc .pt-calc-lines strong { font-size: 1.05rem; }
.fc-calc .pt-calc-verdict { min-height: 4.4em; }
.fc-calc .pt-calc-verdict.is-over { color: var(--body); }
.fc-calc .is-over { color: var(--body); }
.fc-math .fc-math-note { margin-top: clamp(32px,5vw,48px); font-size: .84rem; color: var(--muted); max-width: 760px; }

/* Purchase orders */
.fc-orders { padding: clamp(72px,10vw,120px) 0; background: var(--grey); }
.fc-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 22px; flex: 1 1 300px; max-width: 420px; }
.fc-steps li { display: grid; grid-template-columns: 40px minmax(0,1fr); gap: 14px; align-items: start; color: var(--muted); font-size: .93rem; line-height: 1.6; }
.fc-steps strong { display: block; font-size: 1.1rem; letter-spacing: -.02em; color: var(--ink); margin: 4px 0 2px; }
.fc-step-num { width: 40px; height: 40px; border-radius: 50%; background: #fff; border: 1.5px solid var(--ink); color: var(--ink); display: grid; place-items: center; font-weight: 850; }
.fc-steps li:first-child .fc-step-num { background: var(--ink); color: #fff; }

/* Supplier rules */
.fc-suppliers { padding: clamp(72px,10vw,120px) 0; }
.fc-suppliers-grid { display: flex; flex-wrap: wrap; gap: clamp(36px,5vw,64px); align-items: center; }
.fc-rules { flex: 1 1 320px; max-width: 440px; min-width: 0; }
.fc-rules .pt-guards-head span:last-child { text-align: right; }
.fc-suppliers .pt-row-demo { flex: 2 1 440px; }

/* Stocky and method */
.fc-cards-section { padding: 0 0 clamp(72px,10vw,120px); }
.fc-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 18px; }
.fc-card { border: 1px solid var(--line); background: var(--soft); border-radius: 22px; padding: clamp(26px,4vw,36px); display: flex; flex-direction: column; gap: 14px; }
.fc-card .pt-eyebrow { margin: 0 !important; }
.fc-card-title { font-size: clamp(1.4rem, 2.4vw, 1.75rem); font-weight: 850; letter-spacing: -.04em; line-height: 1.1; }
.fc-card > p { color: var(--body); font-size: .97rem; }
.fc-card .pt-tile-link { margin-top: auto; }
.fc-card-dark { background: var(--ink); border-color: var(--ink); color: #fff; }
.fc-card-dark .pt-eyebrow { color: #d9d6d4; }
.fc-card-dark .pt-tile-link { color: #fff; }
.fc-card-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; color: #d9d6d4; font-size: .95rem; }
.fc-card-steps li { display: grid; grid-template-columns: 28px minmax(0,1fr); gap: 12px; align-items: start; }
.fc-card-steps li span { width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid #fff; display: grid; place-items: center; font-size: .78rem; font-weight: 800; color: #fff; }

/* Three jobs */
.fc-loop-link { display: flex; flex-direction: column; }
.fc-loop-link .pt-tile-link { margin-top: 14px; }
.pt-loop-dark .pt-tile-link { color: #fff; }

/* Closing */
.fc-closing-box { width: min(420px, 60vw); }

@media (max-width: 960px) {
  .fc-demo .pt-receipt-float { margin: -8px auto 0; transform: rotate(-2deg); }
  .fc-demo .fc-demo-note { margin: 14px auto 0; }
  .fc-runway { transform: none; max-width: none; }
}
@media (max-width: 560px) {
  .fc-slider .pt-breakeven { font-size: .62rem; }
}
.fc-hero .pt-chip-new { white-space: nowrap; }

/* Ticker: sits between the hero and the dark section, so a hairline separates the two. */
.fc-ticker { border-bottom: 1px solid #ffffff1f; }