/* ============================================================================
   fmcg-guide.css — PROTOTYPE ONLY, not production
   Pack 2, Industry Buyer Guides: FMCG ERP Buyer's Guide

   Layered on main.css + pages/knowledge-article.css + buyer-guide.css.

   buyer-guide.css is NOT modified. The Buyer Guide visual system is permanently
   frozen, and TWO shared corrections are part of that frozen baseline:

     .bg-cta-in .btn-p  white-space: normal        long CTA labels wrap
     .bg-signoff td     overflow-wrap: break-word  unbreakable tokens wrap

   Both are relied on here and neither is touched or duplicated. This guide
   carries NO CTA rule and NO sign-off table rule; family-qa.js asserts that no
   guide-specific stylesheet re-privatises either behaviour.

   FMCG loads none of guide2-7.css, seed-guide.css, steel-guide.css,
   transport-guide.css, manufacturing-guide.css or chemical-guide.css: the
   prototypes stay independent, which is why a component that also exists in
   another guide's stylesheet is redefined here. That is the established family
   pattern.

   Reused from the frozen buyer-guide.css, unchanged:
     .bga-hero .bga-doc .bga-band          brand-aligned shell + semantic bands
     .bg-rail .bg-toc .bg-toc-m            contents, desktop and mobile
     .bg-answer .bg-tag                    direct answer + hero label
     .bg-record                            every flat equal-weight set
     .bg-qlist                             the outstanding/ageing question set
     .bg-pair                              PRIMARY SALES vs SECONDARY SALES
     .bg-show                              the eight SHOW ME scenarios
     .bg-principle                         the key principles and proof roles
     .bg-signoff                           the 61-row evaluation record
     .bg-proof                             Ambika, ANA and Solae evidence, no logo
     .bg-check                             the thirty-three-group checklist
     .bg-vendor .bg-cta .bg-sr h2.bg-rule  Exactlly band, CTA, a11y, rhythm
     .kn-note .kn-next                     knowledge-article idioms

   FIVE components are defined here, each because the shared set cannot express
   it: a blockquote (nothing styles <blockquote>), the commercial chains, the
   four signature statements, the product-truth blocks, the five delivery
   classifications and the red flags.

   Like Chemical, FMCG defines NO two-panel component of its own. It has exactly
   one genuine equal pair — PRIMARY SALES vs SECONDARY SALES — and the shared
   .bg-pair already does that job with the source's own ≠ between the halves.
   The reasoning is recorded below where such a component would have gone.

   THE DEFINING EDITORIAL CONSTRAINT.

   Almost every FMCG capability in the approved copy is CONDITIONAL. The source
   says "where applicable", "where required", "where configured", "where
   distributor stock data is available", "where the FMCG operating model
   requires it", "according to configured rules", "according to scheme terms".
   Those qualifiers are the guide's honesty, and the styling must never let one
   drift away from the list it governs — so .fm-truth keeps each qualifying
   sentence INSIDE the block that carries the items.

   Second constraint: channel-model neutrality. Distributor-led, dealer-led,
   direct retail, modern trade, institutional, presales, route sales, van sales,
   e-commerce — the approved copy says these models can overlap. Nothing here
   ranks, numbers or colours any member of a set, and no set implies that
   distributors, secondary-sales capture, van sales, batch control, expiry,
   FEFO, MRP pricing or batch recall are universal.

   Third constraint: the two capability standings must not merge. The 40
   confirmed FMCG-SPECIFIC capabilities and the relevant broader Exactlly
   capabilities are separately labelled blocks, never one list, because counting
   the second set as FMCG confirmations would overstate the product.
   ============================================================================ */

/* ── Quotations ────────────────────────────────────────────────────────────
   The approved copy sets a large number of questions and statements as
   blockquotes. Nothing in main.css or knowledge-article.css styles
   <blockquote>. */

.kn-article .fm-quote {
  margin: 0 0 22px;
  padding: 16px 20px;
  background: var(--bg-s);
  border-left: 3px solid var(--b-bd);
  border-radius: 0 var(--r) var(--r) 0;
}

.kn-article .fm-quote p {
  font-size: 16.5px !important;
  line-height: 1.6;
  color: var(--t) !important;
  font-weight: 500;
  margin: 0 !important;
}

/* The question the buyer should ask instead of the one being set aside. */
.kn-article .fm-quote.is-key { background: var(--b-lt); border-left-color: var(--b); }

.fm-quotes { display: flex; flex-direction: column; gap: 8px; margin: 0 0 22px; }
.fm-quotes .fm-quote { margin: 0; }

/* ── The four signature statements ─────────────────────────────────────────
   MOVE THE SKU · CONTROL THE SCHEME · PRIMARY SALES ≠ SECONDARY SALES ·
   CLOSE THE RECEIVABLE.

   The approved source states each of these twice: once as the section heading,
   and once as its own emphasised standalone line immediately after "It is:" or
   "The second FMCG signature principle is:". That standalone line needs a
   treatment of its own — it is not a quotation, so .fm-quote is wrong, and it
   is not a second heading, so an <h*> would corrupt the document outline and
   put four duplicate entries in the contents rail.

   Deliberately restrained. Centred, uppercase-as-written, brand colour, a
   hairline top and bottom. No box, no fill, no icon, no decorative rule work:
   these are the guide's spine, not a marketing slogan, and the brief is
   explicit that they must not become one. */

.kn-article p.fm-sig {
  margin: 4px 0 22px !important;
  padding: 18px 16px !important;
  border-top: 1px solid var(--b-bd);
  border-bottom: 1px solid var(--b-bd);
  text-align: center;
  font-size: 20px !important;
  font-weight: 800;
  letter-spacing: .02em;
  line-height: 1.35;
  color: var(--b) !important;
}

/* ── Commercial chains ─────────────────────────────────────────────────────
   Three chains: the SKU-to-cash lifecycle (sixteen stages), MOVE THE SKU (ten)
   and the free-goods chain (six).

   flex-direction:row is REQUIRED and explicit. knowledge-article.css:107 sets
   flex-direction:column on .kn-article ul/ol and wins otherwise — the defect
   found in Guides 2, 5 and 6 and guarded against in every guide since.
   flex-wrap:wrap is retained so a sixteen-stage chain wraps rather than
   overflowing.

   Text only. No SVG, no van, truck, store or shelf artwork, no pack collage,
   no animation. */

.kn-article .fm-chain {
  list-style: none;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  margin: 4px 0 22px !important;
  padding: 16px 18px !important;
  background: var(--bg-s);
  border: 1px solid var(--br);
  border-radius: var(--r);
}

.kn-article .fm-chain li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 !important;
  margin: 0;
  font-size: 14.5px !important;
  font-weight: 600;
  color: var(--t) !important;
  line-height: 1.4;
}

.kn-article .fm-chain li::before { content: none; }

.fm-chain-a { color: var(--b); font-weight: 700; }

/* ── A two-panel component was considered and is deliberately ABSENT ────────
   Seeds carries .sd-trace, Steel .st-dual, Transport .tr-dual, Manufacturing
   .mf-dual. FMCG carries none, for the reason Chemical established: a
   two-panel component with a single instance is card overload.

   FMCG has exactly one genuine equal pair. The approved copy states, in two
   consecutive sentences, that primary sales tell the company what it sold to
   the distributor and secondary sales tell it what the distributor sold further
   into the channel. Neither is the aspiration the other falls short of, so the
   treatment must be equal — and the shared .bg-pair already gives two equal
   columns with a symbol between them, which is exactly the source's own ≠. It
   is used there once, without .is-strong.

   The other candidates were checked and rejected on the evidence. STOCK ON HAND
   ≠ SELLABLE STOCK is a statement followed by an eight-member list of reasons,
   not two halves — that is .bg-record. GROSS BILLING ≠ NET COMMERCIAL RESULT is
   a statement followed by a seven-member list of deductions — also .bg-record.
   Inventing panel bodies for either would have been invented prose, which is
   how the Chemical draft's .ch-dual was caught. So there is no rule here. */

/* ── Product-truth blocks ──────────────────────────────────────────────────
   Two standings, which MUST stay distinguishable:

     .is-confirmed  40 confirmed FMCG-SPECIFIC capabilities
     .is-broader     7 relevant confirmed broader Exactlly capabilities

   Differentiated by label and border weight only:

     confirmed  solid brand rule    — the directly governed FMCG truth set
     broader    lighter brand rule  — confirmed, but not FMCG-specific

   There is no third state. Unlike Chemical, the approved FMCG source states no
   explicit non-support, so no .is-unsupported variant exists — inventing one
   would imply a limitation the source does not state, exactly as hiding
   Chemical's would have concealed one it does.

   The qualifying sentence lives inside each block, so a qualifier can never be
   separated from the list it governs. This matters more here than anywhere else
   in the family: 39 of the 40 FMCG capabilities carry at least one conditional
   qualifier. */

.fm-truth { display: flex; flex-direction: column; gap: 16px; margin: 4px 0 22px; }

.fm-truth-b {
  border: 1px solid var(--br);
  border-radius: var(--r);
  background: var(--w);
  padding: 18px 20px 14px;
}

.fm-truth-b.is-confirmed { border-left: 3px solid var(--b); }
.fm-truth-b.is-broader   { border-left: 3px solid var(--b-bd); background: var(--bg-s); }

.kn-article .fm-truth-k {
  display: block;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--b);
  margin-bottom: 6px;
}

/* The broader label takes the muted text token rather than the brand blue: it
   is a scope note, not a feature heading. Still uppercase, still 700, so it
   carries the same visual weight as its sibling and cannot be skimmed past. */
.kn-article .fm-truth-b.is-broader .fm-truth-k { color: var(--t-m); }

.kn-article .fm-truth-q {
  font-size: 14.5px !important;
  line-height: 1.6;
  color: var(--t-m) !important;
  margin: 0 0 12px !important;
}

.kn-article .fm-truth-b ul { margin: 0 !important; }
.kn-article .fm-truth-b li { font-size: 15px !important; }

/* ── Delivery classification ───────────────────────────────────────────────
   Five members, so neither .bg-trio nor .bg-prio — both three-track — fits.
   Unnumbered and identically styled: the approved copy states that none of the
   labels is automatically good or bad, and NOT YET DEMONSTRATED gets exactly
   the same chrome as STANDARD. */

.fm-class {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
  margin: 4px 0 22px;
}

.fm-class-i {
  border: 1px solid var(--br);
  border-radius: var(--r);
  background: var(--w);
  box-shadow: var(--sh-xs);
  padding: 16px 18px 14px;
}

.kn-article .fm-class-k {
  display: block;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--b);
  margin-bottom: 8px;
}

.kn-article .fm-class-i p {
  font-size: 14.5px !important;
  line-height: 1.6;
  margin: 0 !important;
}

/* ── Red flags ─────────────────────────────────────────────────────────────
   Twenty-eight of them, the most in the programme. Restrained exactly as
   everywhere else in the family: a hairline and a heading, no alarm colour and
   no icon. The approved copy is diagnostic, not accusatory. */

.fm-flag {
  border-top: 1px solid var(--br);
  padding: 16px 0 0;
  margin: 0 0 18px;
}

.kn-article .fm-flag-h {
  font-size: 15.5px;
  font-weight: 700;
  color: var(--t);
  margin: 0 0 6px;
}

.kn-article .fm-flag p { font-size: 15px !important; }
.kn-article .fm-flag > :last-child { margin-bottom: 0 !important; }

/* ── Ground-aware surfaces on alternate bands ──────────────────────────────
   The frozen shell alternates the body ground between white and var(--bg).
   Two FMCG surfaces sit directly on that ground and are designed against white:

     .fm-quote  var(--bg-s)  #FAFBFC on #F7F8FA — no reading
     .fm-chain  var(--bg-s)  no reading

   Lifted to var(--w) on an alt band, keeping the panel lighter than its ground,
   which is the production idiom of white cards on a .sec-alt section.

   .fm-truth-b.is-broader also carries var(--bg-s), and is deliberately NOT
   listed here. Every .fm-truth in this guide lives inside the shared .bg-vendor
   panel, whose ground is var(--b-lt) #E8F1FB, not the band's. A
   `.bga-band.is-alt > .bga-col > .fm-truth` clause would therefore be dead CSS
   — the exact defect selector-audit.js exists to catch, and the one corrected
   in Guide 7 — so it was removed after the audit reported n=0 for it. Measured
   on the page, the broader block reads at #FAFBFC on #E8F1FB and the confirmed
   block at #FFFFFF on #E8F1FB; both separate clearly, so no rule is needed.
   Chemical's equivalent clause IS live only because that guide states its
   unsupported capability a second time outside the vendor panel.

   GUARDED, following the Pack 1 closure. Two things this selector must not do:

   1. It must not read `.bga-band.is-alt .kn-article .fm-quote`. In the aligned
      shell .kn-article is the grid container and .bga-band sits inside it, so
      .kn-article is an ANCESTOR of the band — that shape matches nothing.

   2. It must not lift every instance. The direct child combinator admits only
      surfaces whose ground really is the band column, directly or through the
      transparent .fm-quotes wrapper; a quotation nested inside a painted panel
      keeps its own fill rather than becoming white-on-white. :not(.is-key)
      leaves the intentionally blue key quotations alone. */

.bga-band.is-alt > .bga-col > .fm-quote:not(.is-key),
.bga-band.is-alt > .bga-col > .fm-quotes > .fm-quote:not(.is-key),
.bga-band.is-alt > .bga-col > .fm-chain {
  background: var(--w);
}

/* ── Responsive ─────────────────────────────────────────────────────────── */

@media (max-width: 720px) {
  .fm-class { grid-template-columns: 1fr; }
  /* The signature statements carry the most type on the page; at 390 the
     20px setting would wrap PRIMARY SALES ≠ SECONDARY SALES to three lines. */
  .kn-article p.fm-sig { font-size: 17px !important; padding: 15px 12px !important; }
}

@media print {
  .fm-quote, .fm-class-i, .fm-truth-b { box-shadow: none; break-inside: avoid; }
  .fm-flag, .fm-sig { break-inside: avoid; }
  /* The chain reads as a sequence on paper without its box. */
  .kn-article .fm-chain { background: none; border: 0; padding: 0 !important; }
}