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

   Chemical loads none of guide2-7.css, seed-guide.css, steel-guide.css,
   transport-guide.css or manufacturing-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 long operational question sets
     .bg-pair                              the genuine "X is not Y" contrast
     .bg-show                              the eight SHOW ME scenarios
     .bg-ask .bg-principle                 the prominent question + key principle
     .bg-signoff                           the 52-row evaluation record
     .bg-proof                             the ARCL Organics evidence, no logo
     .bg-check                             the twenty-eight-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 genealogy chains, the
   product-truth blocks, the five delivery classifications and the red flags.

   Chemical is the first industry guide in this family with NO two-panel equal
   treatment. That is deliberate and the reasoning is recorded below where such a
   component would have gone.

   THE DEFINING EDITORIAL CONSTRAINT.

   This guide states one capability that exactllyERP does NOT currently provide:
   automatic potency/concentration-based batch balancing. The approved copy is
   deliberately explicit about it, and that explicitness is part of the guide's
   value — a buyer whose process needs potency balancing must not be able to
   read past it.

   So .ch-truth must do something no other component in the family does: mark
   three DIFFERENT standings — confirmed Chemical-specific, inherited from
   Manufacturing, and not currently supported — clearly enough that a skimming
   reader cannot conflate them, while never styling the unsupported item as an
   error. It carries no red, no amber, no warning icon and no alarm language.
   A frank statement of what the product does not do is not a fault notice; it
   is the most trustworthy sentence on the page, and it is styled with the same
   restraint as everything else.

   Second constraint: operating-model neutrality. Formulation, reaction-based,
   continuous, specialty, commodity, resins, coatings, toll manufacturing — the
   approved copy says these labels overlap. Nothing here ranks, numbers or
   colours any member of a set, and no set implies batch manufacturing,
   hazardous handling, shelf life or containers 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 .ch-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 .ch-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 .ch-quote.is-key { background: var(--b-lt); border-left-color: var(--b); }

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

/* ── Genealogy chains ──────────────────────────────────────────────────────
   Seven chains: the batch lifecycle (nineteen stages, the longest in the
   programme), the general-Manufacturing chain it is contrasted with, FOLLOW THE
   BATCH, the backward and forward traces, the batch-to-COA chain and the
   container 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 nineteen-stage chain wraps rather than
   overflowing.

   Text only. No SVG, no molecular graphic, no flask or beaker artwork, no
   hazard iconography, no animation. */

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

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

/* ── A two-panel equal treatment was considered and is deliberately ABSENT ──
   Every other industry guide in this family carries one: Seeds .sd-trace,
   Steel .st-dual, Transport .tr-dual, Manufacturing .mf-dual. Chemical does
   not, because none of its candidate pairs survived inspection.

   Backward versus forward genealogy is the obvious one, and the brief lists
   it. But the approved copy gives each direction its own section, its own
   chain and its own question. Pairing them would mean repeating that copy —
   the redundancy this programme has already removed twice, in the Seeds trio
   and the Steel pairs. They are kept as parallel sections using identical
   component vocabulary instead, which achieves the equal reading without the
   duplication.

   The customer-specific requirement versus document presentation is stated by
   the source as "distinguish X from Y" — a genuine inequality, which is what
   the shared .bg-pair exists for.

   The two commercial-genealogy questions are two verbatim quotations, which is
   .ch-quotes.

   So there is no rule here. A component with no genuine instance is card
   overload, and inventing bodies to fill one would have been invented prose. */
/* ── Product-truth blocks ──────────────────────────────────────────────────
   Three standings, which MUST stay distinguishable:

     .is-confirmed    41 confirmed Chemical-specific capabilities
     .is-inherited    16 relevant confirmed Manufacturing capabilities
     .is-unsupported   1 capability exactllyERP does not currently provide

   Differentiated by label and border weight only:

     confirmed    solid brand rule    — the strongest standing
     inherited    lighter brand rule  — confirmed, but not Chemical-specific
     unsupported  neutral hairline    — deliberately the quietest chrome

   The unsupported block is NOT styled as an error. No red, no amber, no icon,
   no "warning" language: it is a frank statement of product truth, and dressing
   it as a fault would be as misleading as hiding it. It is quiet, but it is
   full width, in normal body colour, with its own uppercase status label — so a
   reader skimming for capability cannot mistake it for a supported item, and a
   reader looking for the limitation finds it without hunting.

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

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

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

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

.kn-article .ch-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 label takes the muted text token rather than the brand blue:
   it is a status, not a feature heading. Still uppercase, still 700, so it
   carries the same visual weight as its siblings. */
.kn-article .ch-truth-b.is-unsupported .ch-truth-k { color: var(--t-m); }

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

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

/* The unsupported statement itself reads at body weight in the primary text
   colour — the sentence a buyer must not skim past. */
.kn-article .ch-truth-b.is-unsupported p.ch-truth-s {
  font-size: 16px !important;
  line-height: 1.6;
  font-weight: 600;
  color: var(--t) !important;
  margin: 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. */

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

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

/* ── Red flags ─────────────────────────────────────────────────────────────
   Twenty-seven 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. */

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

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

.kn-article .ch-flag p { font-size: 15px !important; }
.kn-article .ch-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).
   Three Chemical surfaces are designed against white:

     .ch-quote                  var(--bg-s)  #FAFBFC on #F7F8FA — no reading
     .ch-chain                  var(--bg-s)  no reading
     .ch-truth-b.is-unsupported 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. The
   unsupported block must be included: it is the one statement on the page that
   must never become hard to read.

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

   1. It must not read `.bga-band.is-alt .kn-article .ch-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 .ch-quotes and .ch-truth wrappers; a quotation nested inside a
      painted .ch-truth-b 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 > .ch-quote:not(.is-key),
.bga-band.is-alt > .bga-col > .ch-quotes > .ch-quote:not(.is-key),
.bga-band.is-alt > .bga-col > .ch-chain,
.bga-band.is-alt > .bga-col > .ch-truth > .ch-truth-b.is-unsupported {
  background: var(--w);
}

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

@media (max-width: 720px) {
  .ch-class { grid-template-columns: 1fr; }
}

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