/* ============================================================================
   edible-oil-guide.css — PROTOTYPE ONLY, not production
   Pack 2, Industry Buyer Guides: Edible Oil 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.

   Edible Oil loads none of guide2-7.css, seed-guide.css, steel-guide.css,
   transport-guide.css, manufacturing-guide.css, chemical-guide.css or
   fmcg-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 is deliberately NOT used: every question set in this approved
      source is stated as its own blockquote, so every one is .eo-quotes)
     .bg-show                              the eight SHOW ME scenarios
     .bg-principle                         key principles and the proof role
     .bg-signoff                           the 75-row evaluation record
     .bg-proof                             the ANA Oils evidence, no logo
     .bg-check                             the thirty-five-group checklist
     .bg-vendor .bg-cta .bg-sr h2.bg-rule  Exactlly band, CTA, a11y, rhythm
     .kn-note .kn-next                     knowledge-article idioms

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

   Like Chemical and FMCG, Edible Oil defines NO two-panel or three-panel
   comparison component. It carries SIX "X ≠ Y" distinctions, more than any
   other guide in the family, and the reasoning for treating them uniformly
   without a bespoke component is recorded below where one would have gone.

   THE DEFINING EDITORIAL CONSTRAINT.

   This guide has to hold FOUR different capability standings apart, which is
   one more than Chemical and two more than FMCG:

     confirmed    the 40 Edible-Oil-specific capabilities
     FIFO         one advanced capability that IS supported, but on an
                  assumed/CALCULATED basis rather than a measured one
     unsupported  one capability exactllyERP does not currently provide at all
     broader      the 22 relevant broader Exactlly capabilities

   The FIFO standing is the subtle one, and it is the one a reader is most
   likely to over-read. Tank commingling IS supported: multiple source batches
   can enter a tank and a later partial withdrawal is attributed to sources.
   But that attribution is CALCULATED on a FIFO rule — it is not a measured
   physical layer-by-layer identification of the liquid. A buyer who needs
   measured source identity must not be able to read past that, so .is-fifo
   gets its own label, its own border weight and its own ground, sitting
   visually between "confirmed" and "not supported" exactly as it does in
   substance.

   Neither the unsupported block nor the FIFO block carries any alarm colour,
   red, amber, warning icon or fault language. A frank statement of what a
   product does and does not do is the most trustworthy content on the page.

   Second constraint: operating-model neutrality. Crushing, refining, blending,
   packing, bulk trading, full-tanker sales, distribution, job work — the
   approved copy says these models can overlap. Nothing here ranks, numbers or
   colours any member of a set, and no set implies that crushing, refining,
   blending, packing, brokers, tanks or full-tanker sales are universal.
   ============================================================================ */

/* ── 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 .eo-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 .eo-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 .eo-quote.is-key { background: var(--b-lt); border-left-color: var(--b); }

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

/* ── The three signature statements ────────────────────────────────────────
   CONTROL THE COMMITMENT · FOLLOW THE OIL · EXPLAIN THE RECOVERY.

   The approved source states each of them twice: once as the section heading,
   and once as its own emphasised standalone line after "The Nth Edible Oil
   signature principle is:". That standalone line needs a treatment of its own —
   it is not a quotation, so .eo-quote is wrong, and it is not a second heading,
   so an <h*> would corrupt the document outline and put three 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: the brief is explicit that
   these must not become decorative slogans. */

.kn-article p.eo-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;
}

/* ── Commodity chains ──────────────────────────────────────────────────────
   Nine chains: the commodity-to-market lifecycle (21 stages), the Manufacturing
   and FMCG chains it is contrasted with, the broker exposure view, FOLLOW THE
   OIL (10 stages), the bulk-to-pack forward and backward traces, and the
   economic chain.

   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 21-stage chain wraps rather than overflowing.

   Text only. No SVG, no tanker, tank, refinery or oil-bottle artwork, no plant
   diagram, no commodity chart, no animation. */

.kn-article .eo-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 .eo-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 .eo-chain li::before { content: none; }

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

/* The weighbridge arithmetic — gross, − tare, = net — is the same component
   with no connector, because the approved source already carries its own
   operator on each line. Inserting an arrow would assert a sequence the source
   does not state. The gap widens slightly so the operators read as arithmetic
   rather than as a list. */
.kn-article .eo-chain.is-calc { gap: 8px 18px; }

/* ── No comparison component, and why ──────────────────────────────────────
   Seeds carries .sd-trace, Steel .st-dual, Transport .tr-dual, Manufacturing
   .mf-dual. Chemical and FMCG carry none. Edible Oil carries none either, and
   it is the guide with the strongest surface case for one: SIX distinctions,
   more than any other guide in the family.

     BOOKED QUANTITY ≠ RECEIVED QUANTITY
     CONTRACTED QUANTITY ≠ DELIVERED QUANTITY ≠ ACCEPTED QUANTITY
     BOOKED RATE ≠ CURRENT MARKET RATE
     GROSS WEIGHT ≠ NET MATERIAL
     BULK OIL ≠ PACKED SKU
     STANDARD YIELD ≠ ACTUAL RECOVERY

   Every one of them is stated by the approved source as a SECTION HEADING
   followed by supporting copy — never as two or three balanced panel bodies.
   Building panels would have meant writing the bodies, which is precisely the
   invented prose the Chemical draft's .ch-dual was caught committing. Where the
   source does enumerate the members of a distinction, as it does for the three
   quantities and the six oil states, that enumeration is a flat equal-weight
   set, which is exactly the shared .bg-record.

   The three-way CONTRACTED ≠ DELIVERED ≠ ACCEPTED was the closest call. The
   shared .bg-trio would fit it structurally, but .bg-trio needs a label AND a
   paragraph per column, and the source supplies only the three quantity names.
   The only candidate bodies were the three clauses of the buyer question — and
   that question is already rendered verbatim as its own quotation immediately
   below, so using it twice would repeat approved copy. That redundancy has been
   removed four times in this programme (the Seeds trio, the Steel pairs, the
   Transport dual, the Chemical dual) and was not going to be reintroduced here.

   So all six distinctions get the same treatment: a caps heading, the source's
   own supporting copy, its own enumeration where one exists, and the buyer
   question. Uniform, honest, and no card overload. */

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

     .is-confirmed    40 confirmed Edible-Oil-specific capabilities
     .is-fifo          1 SUPPORTED advanced capability, calculated FIFO basis
     .is-unsupported   1 capability exactllyERP does not currently provide
     .is-broader      22 relevant broader Exactlly capabilities

   Differentiated by label, border weight and ground only:

     confirmed    solid brand rule, white         — the strongest standing
     fifo         solid brand-border rule, tinted — supported, with a caveat
     unsupported  neutral hairline, tinted        — deliberately the quietest
     broader      lighter brand rule, tinted      — confirmed, not EO-specific

   The FIFO block sits visually between confirmed and unsupported because that
   is where it sits in substance: the capability exists, but its source
   attribution is CALCULATED, not measured. Its label says so, and its statement
   line carries the same weight as the unsupported statement, so a reader
   skimming for capability cannot take it for measured physical identity.

   Neither the FIFO nor the unsupported block is styled as an error. No red, no
   amber, no icon, no "warning" language.

   The qualifying sentence lives inside each block, so a qualifier can never be
   separated from the list or statement it governs. */

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

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

.eo-truth-b.is-confirmed   { border-left: 3px solid var(--b); }
.eo-truth-b.is-fifo        { border-left: 3px solid var(--b-bd); background: var(--b-lt); }
.eo-truth-b.is-unsupported { border-left: 3px solid var(--t-l); background: var(--bg-s); }
.eo-truth-b.is-broader     { border-left: 3px solid var(--b-bd); background: var(--bg-s); }

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

/* The unsupported and broader labels take the muted text token rather than the
   brand blue: each is a status or a scope note, not a feature heading. Still
   uppercase, still 700, so they carry the same visual weight as their siblings
   and cannot be skimmed past. The FIFO label KEEPS the brand blue, because the
   capability it heads genuinely is supported. */
.kn-article .eo-truth-b.is-unsupported .eo-truth-k,
.kn-article .eo-truth-b.is-broader .eo-truth-k { color: var(--t-m); }

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

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

/* The statement itself — the FIFO basis, and the hedge non-support — reads at
   body weight in the primary text colour. These are the two sentences a buyer
   must not skim past. */
.kn-article .eo-truth-b p.eo-truth-s {
  font-size: 16px !important;
  line-height: 1.6;
  font-weight: 600;
  color: var(--t) !important;
  margin: 0 !important;
}

/* The trailing caveat under a statement. Same muted treatment as the leading
   qualifier, so the block reads qualifier / statement / caveat top to bottom. */
.kn-article .eo-truth-b p.eo-truth-t {
  font-size: 14.5px !important;
  line-height: 1.6;
  color: var(--t-m) !important;
  margin: 12px 0 0 !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. */

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

.eo-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 .eo-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 .eo-class-i p {
  font-size: 14.5px !important;
  line-height: 1.6;
  margin: 0 !important;
}

/* ── SHOW ME trailing notes ────────────────────────────────────────────────
   Two of the eight approved scenarios are followed by a line that is NOT part
   of the scenario itself: the commingling FIFO note after SHOW ME 4, and the
   separate-hedge-requirement note after SHOW ME 8. Both are approved copy and
   both must appear, so each renders as its own line inside the scenario,
   separated by a hairline and set slightly quieter than the scenario body so it
   reads as a condition on the test rather than as part of it. */

.kn-article .eo-show-n {
  display: block;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--br);
  font-size: 14px;
  line-height: 1.6;
  color: var(--t-m);
}

/* ── Red flags ─────────────────────────────────────────────────────────────
   Thirty-two 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. */

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

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

.kn-article .eo-flag p { font-size: 15px !important; }
.kn-article .eo-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).
   Four Edible Oil surfaces sit directly on that ground and are designed against
   white:

     .eo-quote                    var(--bg-s)  #FAFBFC on #F7F8FA — no reading
     .eo-chain                    var(--bg-s)  no reading
     .eo-truth-b.is-unsupported   var(--bg-s)  no reading
     .eo-truth-b.is-fifo          var(--b-lt)  tinted, but included below

   The first two are 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.

   .is-unsupported is NOT in the alt-band rule. Both of its instances were
   measured: one sits on a WHITE band (#FAFBFC on #FFFFFF, d=12, its 3px left
   border carrying the separation — the same reading the shared .eo-chain and
   .bg-principle get on white throughout the family), and the other sits inside
   .bg-vendor (#FAFBFC on #E8F1FB, d=29, clear). Neither ground is an alt band,
   so an `.is-alt` clause for it would be dead CSS — the defect
   selector-audit.js exists to catch, corrected in Guide 7 and again in FMCG. It
   was drafted, reported n=0, and removed.

   .is-broader is not in it either, for the same reason: its one instance lives
   inside .bg-vendor.

   THE VENDOR-PANEL LIFT below is the one that had to be added rather than
   removed. .is-fifo carries var(--b-lt) #E8F1FB, which is exactly what the
   shared .bg-vendor panel paints — so inside that panel the block measured
   #E8F1FB on #E8F1FB, d=0, IDENTICAL TO GROUND. On the page that is the single
   most nuance-critical block in the guide: the one saying commingling IS
   supported but its source attribution is calculated. It cannot be the one
   block without a visible surface. It keeps var(--b-lt) where it sits on a band
   (measured #E8F1FB on #F7F8FA, d=23, clear — and the blue tint is doing real
   work there, signalling "supported" against the quieter unsupported block),
   and lifts to white inside the vendor panel, where white on #E8F1FB measures
   d=41. .bg-vendor appears only as the CONTEXT of the selector: no shared rule
   is redefined.

   GUARDED, following the Pack 1 closure. Two things these selectors must not do:

   1. They must not read `.bga-band.is-alt .kn-article .eo-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. They must not lift every instance. The direct child combinator admits only
      surfaces whose ground really is the band column, directly or through the
      transparent .eo-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 > .eo-quote:not(.is-key),
.bga-band.is-alt > .bga-col > .eo-quotes > .eo-quote:not(.is-key),
.bga-band.is-alt > .bga-col > .eo-chain {
  background: var(--w);
}

.bg-vendor .eo-truth > .eo-truth-b.is-fifo { background: var(--w); }

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

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

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